| scrollIntoView动画效果 | 您所在的位置：网站首页 › 荆莿的意思 › scrollIntoView动画效果 |
|
版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。 https://blog.csdn.net/quhongqiang/article/details/84664285
经常有这样的需求：点击一个链接（内链）跳转到当前页面中间某个部分。对于这样的需求，很容易想到使用锚点实现。但有一个问题：滚动，太过生硬了，体验极差。 我还是比较喜欢平滑滚动。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 类似。可惜的是，目前浏览器支持度欠佳。而 scroll-behavior 作为一个 CSS 属性，不能被 polyfill。scrollIntoView 作为一个 JavaScript 函数对 polyfill 很友好。在目前的情况下，推荐使用 scrollIntoView 加 polyfill 的方式。
|
| CopyRight 2018-2019 实验室设备网 版权所有 |