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

  • apple music空间音频怎么开启(apple music空间音频推荐)

    apple music空间音频怎么开启(apple music空间音频推荐)

  • 苹果wapi怎么开启(苹果wapi怎么打开)

    苹果wapi怎么开启(苹果wapi怎么打开)

  • ios14如何更新(ios14如何更新软件)

    ios14如何更新(ios14如何更新软件)

  • 华为荣耀8x手机怎样截屏(华为荣耀8x手机屏幕不受控制乱跳)

    华为荣耀8x手机怎样截屏(华为荣耀8x手机屏幕不受控制乱跳)

  • word制表符怎么打出来(word制表符怎么隐藏)

    word制表符怎么打出来(word制表符怎么隐藏)

  • 电脑qq录屏在哪找(电脑QQ录屏在哪里)

    电脑qq录屏在哪找(电脑QQ录屏在哪里)

  • 手机开机时间特别长(手机开机时间特别慢)

    手机开机时间特别长(手机开机时间特别慢)

  • 如何从钉钉文件发送到QQ(如何从钉钉文件导出)

    如何从钉钉文件发送到QQ(如何从钉钉文件导出)

  • 无损检测方法的分类(无损检测方法的选择)

    无损检测方法的分类(无损检测方法的选择)

  • pro和max的区别(华为pro和max的区别)

    pro和max的区别(华为pro和max的区别)

  • oppo手机充电显示红色闪电是什么意思(oppo手机充电显示蓝色)

    oppo手机充电显示红色闪电是什么意思(oppo手机充电显示蓝色)

  • 录屏最多录多长时间(录屏最多录多长时间华为)

    录屏最多录多长时间(录屏最多录多长时间华为)

  • 手机插内存卡和手机自带内存一样吗(手机插内存卡好用吗)

    手机插内存卡和手机自带内存一样吗(手机插内存卡好用吗)

  • ipad第七代多少寸(iPad第七代多少赫兹的屏幕)

    ipad第七代多少寸(iPad第七代多少赫兹的屏幕)

  • 平板可以分屏吗(小米平板可以分屏吗)

    平板可以分屏吗(小米平板可以分屏吗)

  • 华硕主板dram灯一直亮(华硕主板dram灯亮黄灯)

    华硕主板dram灯一直亮(华硕主板dram灯亮黄灯)

  • 闲鱼不申诉会怎样(闲鱼15天不申诉会自动取消)

    闲鱼不申诉会怎样(闲鱼15天不申诉会自动取消)

  • 激光彩色打印机和喷墨打印机的区别(激光彩色打印机打印照片效果怎么样)

    激光彩色打印机和喷墨打印机的区别(激光彩色打印机打印照片效果怎么样)

  • ibm电脑是什么(ibm电脑是什么档次)

    ibm电脑是什么(ibm电脑是什么档次)

  • word如何删除表格内容(word如何删除表格保留内容)

    word如何删除表格内容(word如何删除表格保留内容)

  • 苹果怎么用另一个号发短信(苹果怎么用另一个卡发短信)

    苹果怎么用另一个号发短信(苹果怎么用另一个卡发短信)

  • Reno Ace云空间满了怎么办(云空间容量已满怎么办)

    Reno Ace云空间满了怎么办(云空间容量已满怎么办)

  • 事务的四大特性(事务的四大特性分别是什么,各有什么意义)

    事务的四大特性(事务的四大特性分别是什么,各有什么意义)

  • Cookie(cookie什么意思啊)

    Cookie(cookie什么意思啊)

  • DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

    DedeCMS做博客首页生成列表分页的另类实现办法(博客首页设计)

  • 收到待报解预算收入怎么查退的什么税
  • 退多缴纳的所得税 现金流如何处理
  • 不能抵扣的增值税进项税额是什么
  • 动产增值税可以抵扣吗
  • 建筑企业简易计税可以开专票吗
  • 税收分类编码如何查询
  • 开普票的销项税额
  • 处置使用过的车辆
  • 固定总价合同中,承包人承担的价格风险
  • 小规模一季度不超过45万
  • 个体商户多少钱需要报税
  • 销售自产设备税率
  • 母公司投资子公司现金流量表抵消
  • 房地产公司机构
  • 收付转凭证如何排序装订
  • 支付刻制公司印章费
  • 返利抵扣货款
  • 存货的主要内容包括什么
  • 17增值税发票怎么计算
  • 源泉扣缴税率是多少
  • 想做边销茶生意?增值税可以这样处理
  • 企业净资产指的是什么?
  • 个体户注销麻烦还是公司注销麻烦
  • 出租设备的折旧计入哪个科目
  • 出口企业内销商怎么做
  • 银行承兑汇票质押率90%
  • 周围的材料分为哪几类
  • 股权和投票权的关系是什么关系
  • 怎么租办公室省钱
  • php快速查找
  • PHP:oci_bind_array_by_name()的用法_Oracle函数
  • 免抵退税务处理
  • vue引入echarts柱状图
  • 如何安装iis网站服务器
  • php自定义表单
  • php技巧
  • Treetop walkway in Hainich National Park, Thuringia, Germany (© mauritius images GmbH/Alamy)
  • thinkphp框架安装
  • 公司投资资金
  • 黑色金属冶炼压延品的税收编码是多少
  • 新项目分哪几个阶段
  • 火车及机票退票扣多少钱
  • 第9章 内存模型分析
  • 所有小规模都能开专票吗
  • 减免税款借贷方表示
  • 增值税补充申报表不填可以吗
  • 专票没有抵扣联可以作废吗
  • 影响留存收益变动的选折题
  • 增值税留抵有时间限制吗
  • 存货报废进项税转出分录
  • 买车险要先付钱再上牌吗
  • 财政拨款公司的资金来源
  • 本月购进金额怎么算
  • 税前扣除的职工福利费怎么算
  • 差旅费借贷记账法的会计分录
  • 厂家给的促销费可以退吗
  • 跨年度固定资产转为在建工程怎么计算
  • 怎么从会计小白做到总账会计
  • 房地产会计如何报税
  • mysql 连续日期
  • services.exe修改注册表
  • linux中进程在运行时的基本状态
  • win7和xp文件共享
  • win10系统哪款好
  • win7浏览器主页怎么设置
  • macbook 如何设置safari的搜索引擎
  • Windows正在启动卡死
  • win8创建系统映像
  • 浮动浮动
  • kinect unity开发
  • javascript 数组
  • 打开指定文件夹命令
  • unity中canvas怎么调框大小
  • javascript用什么写
  • nvm下载安装
  • Unity destructor Or OnDestory
  • js鼠标点击图片就消失
  • js面向对象是什么意思
  • 在企业内部具有行使否决权的是
  • 国家税务总局34号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设