位置: IT常识 - 正文

CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容

编辑:rootadmin
CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容

推荐整理分享CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

overflow-anchorCSS中的属性相对较新,2017 年首次推出 Chrome ¹,2019 年推出 Firefox,现在 Edge在 2020 年推出 Chrome 过渡。幸运的是,它的使用在很大程度上是一种增强。这个想法是浏览器在默认情况下确实尝试不允许位置移动。然后,如果您不喜欢它的处理方式,您可以使用 将其关闭。所以一般来说,你从不碰它。overflow-anchor 但正如你可能怀疑的那样,我们可以利用这个小美来做一点 CSS 小把戏。即使我们添加新内容,我们也可以强制滚动元素保持固定在底部。

您需要检测何时使用 JavaScript 添加新内容并将滚动元素强制到底部。这是一种MutationObserver在 JavaScript 中使用的技术来监视新内容并强制滚动:

const scrollingElement = document.getElementById("scroller");const config = { childList: true };const callback = function (mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === "childList") { window.scrollTo(0, document.body.scrollHeight); } }};const observer = new MutationObserver(callback);observer.observe(scrollingElement, config);

但我发现一个纯 CSS 的解决方案更有吸引力!上面的版本有一些我们稍后会介绍的用户体验缺陷。

这里的诀窍是浏览器默认已经做了滚动锚定。但是浏览器试图做的不是改变你的页面。因此,当添加可能会改变页面视觉位置的新内容时,他们会尝试防止这种情况发生。在这种不寻常的情况下,我们有点想要相反的东西。我们希望页面卡在页面底部并让视觉页面在视觉上移动,因为它被迫保持卡在底部。

CSS: overflow-anchor 固定滚动到底部,随着页面内容增多滚动条自己滚动展示最新的内容

下面是这个技巧的工作原理。首先是滚动父元素中的一些 HTML:

<div id="scroller"> <!-- new content dynamically inserted here --> <div id="anchor"></div></div>

所有元素自然都有一个overflow-anchor: auto;,这意味着当它们在屏幕上时,它们会试图阻止页面移动,但我们可以使用overflow-anchor: none;. 所以诀窍是针对所有动态插入的内容并将其关闭:

#scroller * { overflow-anchor: none;}

然后仅强制该锚元素具有滚动锚定,仅此而已:

#anchor { overflow-anchor: auto; height: 1px;}

现在,一旦该锚在页面上可见,浏览器将被迫将该滚动位置固定到它,并且由于它是该滚动元素中的最后一件事,因此保持固定在底部。

<div id="scroller"> <!-- new content dynamically inserted here --> <div id="anchor"></div></div><style>#scroller * { overflow-anchor: none;}#anchor { overflow-anchor: auto; height: 1px;}html { font-family: system-ui, sans-serif;}body { background-color: #7FDBFF; /* In case you need to kick off effect immediately, this plus JS */ /* height: 100.001vh; */}.message { padding: 0.5em; border-radius: 1em; margin: 0.5em; line-height: 1.1em; background-color: white;}</style><script>let scroller = document.querySelector('#scroller');let anchor = document.querySelector('#anchor');// https://ajaydsouza.com/42-phrases-a-lexophile-would-love/let messages = [ 'I wondered why the baseball was getting bigger. Then it hit me.', 'Police were called to a day care, where a three-year-old was resisting a rest.', 'Did you hear about the guy whose whole left side was cut off? He’s all right now.', 'The roundest knight at King Arthur’s round table was Sir Cumference.', 'To write with a broken pencil is pointless.', 'When fish are in schools they sometimes take debate.', 'The short fortune teller who escaped from prison was a small medium at large.', 'A thief who stole a calendar… got twelve months.', 'A thief fell and broke his leg in wet cement. He became a hardened criminal.', 'Thieves who steal corn from a garden could be charged with stalking.', 'When the smog lifts in Los Angeles , U. C. L. A.', 'The math professor went crazy with the blackboard. He did a number on it.', 'The professor discovered that his theory of earthquakes was on shaky ground.', 'The dead batteries were given out free of charge.', 'If you take a laptop computer for a run you could jog your memory.', 'A dentist and a manicurist fought tooth and nail.', 'A bicycle can’t stand alone; it is two tired.', 'A will is a dead giveaway.', 'Time flies like an arrow; fruit flies like a banana.', 'A backward poet writes inverse.', 'In a democracy it’s your vote that counts; in feudalism, it’s your Count that votes.', 'A chicken crossing the road: poultry in motion.', 'If you don’t pay your exorcist you can get repossessed.', 'With her marriage she got a new name and a dress.', 'Show me a piano falling down a mine shaft and I’ll show you A-flat miner.', 'When a clock is hungry it goes back four seconds.', 'The guy who fell onto an upholstery machine was fully recovered.', 'A grenade fell onto a kitchen floor in France and resulted in Linoleum Blownapart.', 'You are stuck with your debt if you can’t budge it.', 'Local Area Network in Australia : The LAN down under.', 'He broke into song because he couldn’t find the key.', 'A calendar’s days are numbered.',];function randomMessage() { return messages[(Math.random() * messages.length) | 0];}function appendChild() { let msg = document.createElement('div'); msg.className = 'message'; msg.innerText = randomMessage(); scroller.insertBefore(msg, anchor);}setInterval(appendChild, 1000);// To kick off effect immediately, this plus CSS// document.scrollingElement.scroll(0, 1);</script>

这里有两个小警告......

请注意,锚必须有一定的大小。我们在height这里使用以确保它不是没有大小的折叠/空元素,这会阻止它工作。为了使滚动锚定起作用,页面必须至少滚动一次才能开始。

第二个更难。一种选择是根本不处理它,您可以等待用户滚动到底部,效果从那里开始起作用。实际上这很好,因为如果他们从底部滚动,效果就会停止工作,这就是你想要的。在上面的 JavaScript 版本中,请注意即使您尝试向上滚动,它也会迫使您进入底部,这就是 Ryan 的意思,这并不是一件容易正确的事情。

如果您需要立即启动效果,诀窍是让滚动元素立即可滚动,例如:

body { height: 100.001vh;}

然后立即触发一个非常轻微的滚动:

document.scrollingElement.scroll(0, 1);

这应该可以解决问题。这些行可在上面的演示中取消注释并尝试。

本文链接地址:https://www.jiuchutong.com/zhishi/293130.html 转载请保留说明!

上一篇:GPT模型总结【模型结构及计算过程_详细说明】(gpt详解)

下一篇:swiper获取当前数组滑动的inex(vue)(swiper.js常用功能)

  • vivox70pro+怎么打开nfc(vivox70pro怎么打开开发者选项)

    vivox70pro+怎么打开nfc(vivox70pro怎么打开开发者选项)

  • 荣耀30有单独的3.5mm耳机孔吗(荣耀30有单独的3g手机吗)

    荣耀30有单独的3.5mm耳机孔吗(荣耀30有单独的3g手机吗)

  • 红米10x和荣耀x10的区别(红米10x和荣耀x40)

    红米10x和荣耀x10的区别(红米10x和荣耀x40)

  • 微信电话会议怎么发起(微信电话会议怎么录音)

    微信电话会议怎么发起(微信电话会议怎么录音)

  • 优酷错误代码24001是什么(优酷错误代码25005)

    优酷错误代码24001是什么(优酷错误代码25005)

  • 荣耀20pro支持光学防抖吗(荣耀20pro支持dc调光吗)

    荣耀20pro支持光学防抖吗(荣耀20pro支持dc调光吗)

  • qq显示电量一直不刷新(为什么qq显示电量一直都是充电中)

    qq显示电量一直不刷新(为什么qq显示电量一直都是充电中)

  • 闲鱼能货到付款吗(闲鱼货到付款 要是假的东西 怎么办)

    闲鱼能货到付款吗(闲鱼货到付款 要是假的东西 怎么办)

  • vi视觉识别系统是什么(vi视觉识别系统设计案例)

    vi视觉识别系统是什么(vi视觉识别系统设计案例)

  • 调整画笔工具大小的快捷键是什么(调整画笔工具大小怎么调)

    调整画笔工具大小的快捷键是什么(调整画笔工具大小怎么调)

  • 蓝v和黄v有什么区别(蓝v有什么好处?)

    蓝v和黄v有什么区别(蓝v有什么好处?)

  • 红米note8pro电池耐用吗(红米note8Pro电池多少钱)

    红米note8pro电池耐用吗(红米note8Pro电池多少钱)

  • 华为荣耀9x有没有语音唤醒功能(华为荣耀9X有没有OTG功能)

    华为荣耀9x有没有语音唤醒功能(华为荣耀9X有没有OTG功能)

  • vivoy7什么时候上市的(vivoy7s什么时候停产)

    vivoy7什么时候上市的(vivoy7s什么时候停产)

  • 小米cc9pro怎么设置自动锁屏时间(小米cc9pro怎么设置返回键)

    小米cc9pro怎么设置自动锁屏时间(小米cc9pro怎么设置返回键)

  • 探探不充钱不能聊天吗(探探不充钱能玩吗)

    探探不充钱不能聊天吗(探探不充钱能玩吗)

  • iphone6s发烫正常吗(苹果手机6s发烫)

    iphone6s发烫正常吗(苹果手机6s发烫)

  • 小米手机望远镜在哪里(小米手机望远镜怎么设置在哪里)

    小米手机望远镜在哪里(小米手机望远镜怎么设置在哪里)

  • 微信时刻视频为啥仅自己可见(微信视频为什)

    微信时刻视频为啥仅自己可见(微信视频为什)

  • i58代和9代的区别(八代i5和9代i5)

    i58代和9代的区别(八代i5和9代i5)

  • 如何设置一级标题格式(如何设置一级标题二级标题三级标题)

    如何设置一级标题格式(如何设置一级标题二级标题三级标题)

  • 天猫手机如何投诉卖家(天猫手机如何投屏电视)

    天猫手机如何投诉卖家(天猫手机如何投屏电视)

  • 如何从 PC 上的 USB 安装 Windows 11(电脑到u盘)

    如何从 PC 上的 USB 安装 Windows 11(电脑到u盘)

  • 前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细,包会(前端实现微信联系人二维码)

    前端实现 微信扫码登录网站 pc端(二维码嵌套页面) 超详细,包会(前端实现微信联系人二维码)

  • AI绘画进军三次元,有人用它打造赛博女友?(diffusion)(ai绘画图片)

    AI绘画进军三次元,有人用它打造赛博女友?(diffusion)(ai绘画图片)

  • css权重的计算规则(css中权重值是什么意思)

    css权重的计算规则(css中权重值是什么意思)

  • 汽车保养 美容
  • 母公司处置子公司合并报表
  • 开办期的所得税年度申报
  • 公司车维修费
  • 在建期间土地使用税可以资本化吗
  • 短期借款的主要形式
  • 项目所在地预缴增值税
  • 应收帐款从工资里扣税吗
  • 装修费用如何摊销成本
  • 对以前年度的收入调整
  • 税后利润再投资
  • 印刷配件有哪些
  • 对方电子承兑发出多长时间可以到账
  • 企业所得税汇算清缴退税分录
  • 单位聘请临时工工资怎么报税
  • 商业保险可以税前全额扣除吗?
  • 年末一般纳税人应交增值税借贷调平什么意思
  • 技术维护费属于劳务还是研发和技术服务
  • 建筑企业能申请小微企业吗
  • 额外收入如何避税
  • 企业缴纳印花税会计分录
  • 出租设备计提折旧记什么科目
  • 企业破产应收账款要发询证函吗
  • 福利费应计入什么费用
  • 怎样将u盘制作成电脑系统启动盘?
  • 福利费用会计分录
  • 电脑运行慢怎么清理c盘
  • awk命令怎么用
  • PHP:pg_client_encoding()的用法_PostgreSQL函数
  • shell脚本攻略第三版pdf
  • 冰雪节上的冰雕图片
  • 股权置换和股权转让
  • Css中的color属性用于设置html元素的背景颜色
  • 看了这篇文章感触很深的说说
  • 数字图像处理实验一实验报告
  • 机器学习:基于逻辑回归对优惠券使用情况预测分析
  • 我已经用尽了洪荒之力漫画表情
  • dmsetup remove_all 会不会清掉数据
  • 酒店的销售费用和管理费用如何进行区分
  • SQL Server 2016 TempDb里的显著提升
  • 销售熟食卤制品怎么做
  • 企业出售自用房产增值税
  • 兼职人员的个税怎么计算
  • 小规模纳税人转一般纳税人当月如何申报
  • 营业收入的核算方式有哪些
  • 增值税退税是否算主营业务收入
  • 长期待摊费用会计分录
  • 机械设备预付款比例
  • 协会申报材料
  • 新注册的公司在企查查上查不到
  • 原材料暂估差异调整
  • 应收账款坏账准备借贷方向
  • 明细分类账的填写
  • 什么是合法有效的继承证明
  • 事业单位应设置事业收入科目
  • win10应用商店应用少
  • linux的apache
  • pps影音怎么没有了
  • 在windows中创建用户的步骤
  • mfc100udll
  • webinstall.exe - webinstall是什么进程
  • linux tar压缩文件命令
  • sharedprem.exe - sharedprem是什么进程 有什么作用
  • android 界面滑动
  • ftp如何上传数据
  • js函数重名
  • PyCharm在win10的64位系统安装实例
  • node.js gui
  • Android通过HttpURLConnection获取JSON并进行UI更新
  • javascript入门基础
  • 在web项目中引入什么
  • android获取本机ip地址
  • onclick和onfocus
  • python怎么用命令行
  • 高速公路通行费的税率
  • 浙江国地税联合申报系统官网
  • 年税怎么扣
  • 宁波税务干部学校
  • 电子税务局备案财务会计制度
  • 税务申报按季度申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设