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

  • 增加微博粉丝的18个方法途径(增加微博粉丝的技巧有哪些)

    增加微博粉丝的18个方法途径(增加微博粉丝的技巧有哪些)

  • 荣耀50能不能开空调(荣耀50能不能开视频美颜)

    荣耀50能不能开空调(荣耀50能不能开视频美颜)

  • 抖音橱窗怎么查看谁拍订单(抖音橱窗怎么查看谁退货了)

    抖音橱窗怎么查看谁拍订单(抖音橱窗怎么查看谁退货了)

  • oppo手机自动喇叭清灰(oppo手机声音老是自动关闭怎么办)

    oppo手机自动喇叭清灰(oppo手机声音老是自动关闭怎么办)

  • 小米miui12有什么优势(miui12真的那么好用吗)

    小米miui12有什么优势(miui12真的那么好用吗)

  • 抖音连赞视频会限流吗(抖音连赞视频会不会限流)

    抖音连赞视频会限流吗(抖音连赞视频会不会限流)

  • 荣耀30有没有红外遥控(荣耀30有没有红包提醒)

    荣耀30有没有红外遥控(荣耀30有没有红包提醒)

  • 路由器1900m是什么意思(路由器上的1900m和1200m是啥意思)

    路由器1900m是什么意思(路由器上的1900m和1200m是啥意思)

  • ipad能设置使用时间吗(ipad设置使用时长到时间后怎么样才开)

    ipad能设置使用时间吗(ipad设置使用时长到时间后怎么样才开)

  • 华为如何隐藏软件(华为如何隐藏软件不被发现)

    华为如何隐藏软件(华为如何隐藏软件不被发现)

  • 电脑关机了微信会自动退出吗(电脑关机了微信为什么还显示在登录)

    电脑关机了微信会自动退出吗(电脑关机了微信为什么还显示在登录)

  • 华为mate30pro微信视频的时候可以美颜吗(华为mate30pro微信来消息没声音)

    华为mate30pro微信视频的时候可以美颜吗(华为mate30pro微信来消息没声音)

  • 笔记本电脑i5和i7区别(笔记本电脑i5和i3有什么区别)

    笔记本电脑i5和i7区别(笔记本电脑i5和i3有什么区别)

  • 苹果8相机设置16比9(苹果8相机设置时间水印)

    苹果8相机设置16比9(苹果8相机设置时间水印)

  • 苹果怎么切换卡打电话(苹果怎么切换卡2发信息)

    苹果怎么切换卡打电话(苹果怎么切换卡2发信息)

  • 全民k歌调音技巧(全民k歌调调)

    全民k歌调音技巧(全民k歌调调)

  • 微信群聊能屏蔽个人吗(微信群聊能屏蔽个人信息吗)

    微信群聊能屏蔽个人吗(微信群聊能屏蔽个人信息吗)

  • 抖音发一分钟以上视频(抖音发一分钟以上的视频为什么别人看不到)

    抖音发一分钟以上视频(抖音发一分钟以上的视频为什么别人看不到)

  • 拼多多扫一扫在哪儿(拼多多扫一扫在哪里打开)

    拼多多扫一扫在哪儿(拼多多扫一扫在哪里打开)

  • vivo手机返回建在哪里(vivo手机返回建不见了怎么弄)

    vivo手机返回建在哪里(vivo手机返回建不见了怎么弄)

  • 利用python实现Apriori关联规则算法

    利用python实现Apriori关联规则算法

  • dedecms织梦去掉文档内链自动连接关键词的下划线(织梦的首页怎么换图片)

    dedecms织梦去掉文档内链自动连接关键词的下划线(织梦的首页怎么换图片)

  • 汇算清缴要调整会计分录吗
  • 资本公积转增资本的限制条件
  • 期初和期末余额均在借方的账户,一般属于
  • 发票勾选后什么时候可以抵扣税
  • 固定资产盘亏计入什么科目
  • 企业增资的分录怎么写
  • 本期缴纳前期应纳税额
  • 科目余额转到其他科目
  • 一个小广告公司一年可以赚多少钱
  • 小规模建筑公司预缴增值税
  • 房地产开发公司取名
  • 税后利润补亏的会计分录怎么做
  • 工程部用的测试仪器
  • 分配利润和分配股利
  • 给员工发的慰问短信
  • 转让股权应具备什么条件
  • 含税销售额的计算公式是什么意思
  • 小规模开票后的分录怎么做
  • 个人独资企业所得税缴纳标准
  • 供应商的账怎么记
  • 固定资产应怎么做账
  • 评估报告怎么算合法
  • win8快捷键大全
  • linux监控系统命令
  • 其他货币资金包括哪些内容
  • mac电脑色彩设置
  • 租赁的车间改造的会计分录
  • ixapplet.exe - ixapplet是什么进程 有何作用
  • 自创商誉是否能入账
  • scards32.exe - scards32是什么进程 有什么用
  • php常用设计模式(大总结)
  • incognito.exe
  • frontpage在哪里打开
  • php socket_create
  • 实收资本和注册资本不一致的会计处理
  • 企业常见的筹资方式有几种
  • laravel视频教程
  • 热带雨林瀑布群雪野
  • 会计年报表怎么做
  • k8s控制器模式
  • 基于深度学习的车型识别系统(Python+清新界面+数据集)
  • ChatGPT的火爆出圈,你对它有几分了解?
  • vue企业开发实战
  • 学长学姐面试要注意哪些细节
  • php给图片加水印
  • 注销企业账面大量现金如何处理
  • 新成立的公司做广告如何写公司简介部分
  • 企业出租专利技术收取的租金不得确认为收入对吗
  • 网银转账退回来是怎么回事
  • 企业产品研发
  • 税控设备技术维护费
  • 生产的半成品怎么做分录
  • 银行本票的使用仅限于
  • 业务招待费管理草案探讨
  • mysql分区是什么意思
  • 正版vista一键升级win7
  • macbookair触控板维修
  • vm虚拟机中的网络设置怎么添加
  • linux px
  • centos怎么设置
  • win8.1无法启动
  • linux生成文件
  • win8自带截图
  • linux安装yum命令步骤
  • Cocos2d-js 3.x: 像素触摸
  • android模块开发
  • django 验证码
  • jquery?
  • 浅谈幼儿良好行为的培养论文
  • csx脚本
  • jquery设置图片大小
  • unity shader saturate
  • 自定义水印相机
  • 简约时尚搭配
  • 进项发票认证了怎么冲红
  • 全国企业信用信息系统网官网
  • 长春市税务局电话号
  • 贵阳市税务局投诉电话号码
  • 演员个人所得税2023
  • 金税三期是什么内容
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设