位置: 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常用功能)

  • 笔记本电脑键盘没反应怎么办(笔记本电脑键盘更换要多少钱?)

    笔记本电脑键盘没反应怎么办(笔记本电脑键盘更换要多少钱?)

  • 荣耀x10支持屏幕指纹解锁吗(荣耀x10屏幕是哪个厂家的)

    荣耀x10支持屏幕指纹解锁吗(荣耀x10屏幕是哪个厂家的)

  • 手机上显示502badg怎么办(手机上显示电话打叉是什么意思)

    手机上显示502badg怎么办(手机上显示电话打叉是什么意思)

  • 抖音给别人点赞又取消别人知道吗(抖音给别人点赞怎么设置别人看不到)

    抖音给别人点赞又取消别人知道吗(抖音给别人点赞怎么设置别人看不到)

  • 腾讯视频超级会员和普通会员有什么区别(腾讯视频超级会员有什么用)

    腾讯视频超级会员和普通会员有什么区别(腾讯视频超级会员有什么用)

  • dx12能提高帧数吗(开启dx12掉帧)

    dx12能提高帧数吗(开启dx12掉帧)

  • 苹果11充电口进水了怎么办(苹果11充电口进水了可以用吹风机吹吗)

    苹果11充电口进水了怎么办(苹果11充电口进水了可以用吹风机吹吗)

  • hdmi和av线接哪个(avg和hdmi)

    hdmi和av线接哪个(avg和hdmi)

  • 为什么剪映总是网络异常(为什么剪映总是卡顿)

    为什么剪映总是网络异常(为什么剪映总是卡顿)

  • 机器语言代表语言有哪些(机器语言有多少种)

    机器语言代表语言有哪些(机器语言有多少种)

  • 在ie8.0的地址栏中应当输入(在ie5.0的地址栏中,应当输入)

    在ie8.0的地址栏中应当输入(在ie5.0的地址栏中,应当输入)

  • 什么是手机水凝膜(什么是手机水凝冻膜)

    什么是手机水凝膜(什么是手机水凝冻膜)

  • 爱奇艺vr会员和爱奇艺会员通用吗(爱奇艺vr会员和奇遇会员)

    爱奇艺vr会员和爱奇艺会员通用吗(爱奇艺vr会员和奇遇会员)

  • 怎么关语音助手(华为手机怎么关语音助手)

    怎么关语音助手(华为手机怎么关语音助手)

  • 华为畅享10plus返回键在哪(华为畅享10plus返回键在哪设置)

    华为畅享10plus返回键在哪(华为畅享10plus返回键在哪设置)

  • 华为nova6什么时候上市(华为nova6什么时候生产的)

    华为nova6什么时候上市(华为nova6什么时候生产的)

  • 路由器ap隔离怎么关闭(路由器ap隔离怎么解除)

    路由器ap隔离怎么关闭(路由器ap隔离怎么解除)

  • 趣步3.1.1怎么买糖果(趣步现在怎么玩)

    趣步3.1.1怎么买糖果(趣步现在怎么玩)

  • mrjp2ch是ipad几代(mrjp2ch/a是什么型号的ipad)

    mrjp2ch是ipad几代(mrjp2ch/a是什么型号的ipad)

  • 苹果x底下横线怎么隐藏(苹果x底部横线消失)

    苹果x底下横线怎么隐藏(苹果x底部横线消失)

  • v813a是什么手机(v8181a是什么手机)

    v813a是什么手机(v8181a是什么手机)

  • 相册恢复照片在哪里找(相册恢复照片在哪)

    相册恢复照片在哪里找(相册恢复照片在哪)

  • rpmsign命令  签名管理工具(reprovision签名失败error)

    rpmsign命令 签名管理工具(reprovision签名失败error)

  • 帝国cms 7如何调用专题信息(帝国cms界面)

    帝国cms 7如何调用专题信息(帝国cms界面)

  • c语言中常规函数和指针函数区别(c语言常用函数用法)

    c语言中常规函数和指针函数区别(c语言常用函数用法)

  • 合伙企业缴纳的是什么税
  • 汇算清缴补缴税款如何做账
  • 企业上缴税费总额怎么算
  • 事业单位缴纳增值税标准
  • 中外合资房地产公司
  • 哪些邮政业务可以寄快递
  • 准予以后纳税年度结转扣除的项目有
  • 废旧物资回收需要什么手续
  • 三证合一的税号变了,法人怎么重新绑定企业
  • 营改增前取得的不动产出售的计税方法
  • 购买商品成本要支付哪些成本
  • 出口申报时限
  • 固定资产划转要交增值税吗
  • 企业计提的工资薪金支出可以在税前扣除
  • 企业公司报税流程
  • 企业收到供货单位提供的材料
  • 工程施工纳税
  • 销方开具红字发票流程
  • 退税指导
  • 收到发票对方已红冲是否退回?
  • 应收账款未计提坏账,但是确实收不回来
  • 进口货物可以退回吗
  • 上市公司的股份可以转卖吗
  • windows11如何进入启动设置
  • php fork
  • u启动pe装机工具如何重装系统win10
  • 新会计准则2020变化
  • 二级资本债是什么意思
  • 私车公用维修费属于个人承担吗
  • netddeclnt.exe - netddeclnt是什么进程 有什么用
  • 苹果a1530是什么
  • linux安装常用命令
  • nbscheduler是什么程序
  • 木星应该涂什么颜色
  • wordpress界面
  • 拉尔韦橡
  • 退车船税分录
  • 收到转账怎么写分录
  • spring boot 2.3.0
  • chrome os安装到u盘
  • python面向过程与面向对象的区别
  • 补发工资账务处理
  • 公司购买理财产品
  • 帝国cms中英
  • 改造后的固定资产入账价值
  • 第一次购买金税盘会计分录
  • 不开增值税发票的销售收入报税操作流程是?
  • 是不是所有的发票都是一样的
  • sql数据库转换mysql
  • sa密码不满足强密码要求
  • 小规模纳税人差额征税
  • 现金日记账采用哪一种账簿的形式
  • 评估价计入什么科目
  • 主营业务成本如何设置明细
  • 企业缴纳员工社保会计分录
  • 把公司设备操作坏了怎么担责
  • 独立核算的单位是什么意思
  • 销售现金优惠会计分录
  • 税控盘服务费会计科目
  • 发票勾选认证的时间限制是多久
  • 公司租用私人汽车怎么操作
  • 进项税额抵扣是按税率分开抵扣吗
  • 减少注册资本要公示多少天
  • sql里面时间函数格式
  • win8.1使用
  • windows10点击任务栏没有反应
  • gh-files是什么
  • hidden word什么意思
  • linux中比较文件链接数的变化
  • mysql如何添加外键
  • Sublime Text + decoda 调试Quick-cocos2d-x 游戏
  • html通配符选择器怎么用
  • javascript绘制图形
  • xml文件的数据如何读取
  • javascript for in
  • 原生javascript
  • 泰兴市税务局办税服务厅
  • 车辆购置税完税证明有用吗
  • 苏州市区公司可以在园区买社保吗
  • 广东省上交国家财政
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设