摘要:默认值为,表示立刻滚到底即表示平滑滚动。这时对锚点内链触发的视口滚动同样有效。它接受两种形式的值布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动老版的浏览器。表示行内元素排列方向要滚动到的位置。
经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动一步到位,太生硬了。
我还是比较喜欢平滑滚动。HTML5 中提供了 CSS 属性 scroll-behavior 并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。
scroll-behavior这个 CSS 属性就只接受两个自定义值:auto 和 smooth。默认值为 auto,表示立刻滚到底;smooth 即表示平滑滚动。这个属性会影响滚动函数 scrollTo、scrollIntoView 等的默认滚动行为,也会影响 scrollTop、scrollLeft 等 DOM 属性改变时的滚动行为。如果 scroll-behavior 被设置在根元素()上,表示应用在视口(viewport)上。这时对锚点、内链触发的视口滚动同样有效。
所以只需要给 html 元素设置样式 scroll-behavior: smooth 点击内链就会触发页面的平滑滚动,很简单吧。
scrollIntoView上面说到:scroll-behavior 是指定滚动函数的默认行为,这其中就包括 scrollIntoView。顾名思义:这个函数就是把某个元素滚动到窗口的可见区域。
它接受两种形式的值:布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器。我们这里只说对象值。
{ behavior: "auto" | "instant" | "smooth", // 默认 auto block: "start" | "center" | "end" | "nearest", // 默认 center inline: "start" | "center" | "end" | "nearest", // 默认 nearest }
对象可以有三个参数。
behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 使用平滑滚动。
block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说,就是竖直方向。start 表示将视口的顶部和元素顶部对齐;center 表示将视口的中间和元素的中间对齐;end 表示将视口的底部和元素底部对齐;nearest 表示就近对齐。
inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说,就是水平方向。其值与 block 类似。
示例https://codepen.io/CarterLi/p...
可惜的是,目前浏览器支持度欠佳。而 scroll-behavior 作为一个 CSS 属性,不能被 polyfill。scrollIntoView 作为一个 JavaScript 函数对 polyfill 很友好。在目前的情况下,推荐使用 scrollIntoView 加 polyfill 的方式
完文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/92487.html
摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。 前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要...
摘要:在浏览器中,页面默认滚动是在标签上,移动端大多数在标签上,在我们想要实现平滑回到顶部,只需在这两个标签上都加上准确的说,写在容器元素上,可以让容器非鼠标手势触发的滚动变得平滑,而不局限于,标签。 前言 在实际应用中,经常用到滚动到页面顶部或某个位置,一般简单用锚点处理或用js将document.body.scrollTop设置为0,结果是页面一闪而过滚到指定位置,不是特别友好。我们想要...
摘要:如果做内部系统,交互要求又不高,这个现在已经是我的首选了,希望大家多多使用 前言 在处理页面内平滑滚动我们使用的方案无外乎以下几种 使用a标签的href属性 使用location.href 使用第三方库 关于1、2点,楼主写了一个例子http://js.jirengu.com/qevud 缺陷 如果我们使用a标签的href属性的话:其一是受限——只能在a标签上使用这一功能其二是...
摘要:左边的边栏线则是使用的来画出来的,根据层级相应做一些调整,辅以的的效果就可以呈现出不错的移动效果。 这个插件根据选定的目录内容中的 h1, h2, h3, h4, h5, h6 标签来自动生成目录插入到选定的目录容器中,并且提供一个漂亮的样式效果 监听内容区滚动 点击跳转功能 兼容性:IE10+ (由于使用了 node.classList) 地址戳这里 github地址,欢迎sta...
摘要:如果为,元素的底端将和其所在滚动区的可视区域的底端对齐。根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。 [TOC] scrollIntoView系列 移动web页面,input获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验。 scrollIntoView elemen...
阅读 2392·2021-11-25 09:43
阅读 1149·2021-09-07 10:16
阅读 2576·2021-08-20 09:38
阅读 2917·2019-08-30 15:55
阅读 1390·2019-08-30 13:21
阅读 858·2019-08-29 15:37
阅读 1407·2019-08-27 10:56
阅读 2076·2019-08-26 13:45