scroll-behavior

Avatar of Geoff Graham
Geoff Graham 发布

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

CSS 中的 scroll-behavior 属性允许我们定义当用户点击一个链接(该链接指向滚动框内一个锚定位置)时,浏览器的滚动位置是跳转到一个新位置,还是平滑动画过渡。

html {
  scroll-behavior: smooth;
}

深入解释

等等,我们说的这个滚动框是什么?它是一个内容超出其边界的元素。

查看 CodePen 上 CSS-Tricks 的 滚动框@css-tricks)。

注意上面的演示中的框是否具有固定的 200px 高度?超出该高度的任何内容都位于框的边界之外,并且我们添加了 overflow-y: scroll 以便通过垂直滚动访问该额外内容。这就是我们所说的滚动框。

现在假设我们在框的顶部添加一个导航,每个链接都指向内容的三个部分。

查看 CodePen 上 CSS-Tricks 的 带导航的滚动框@css-tricks)。

每个链接都将用户直接带到滚动框内的不同内容部分。默认情况下,此过渡是突然的跳转。

内容之间的跳转默认情况下是突然的。

这种跳转可能会让人感到突兀。这就是 scroll-behavior 的用处,它允许我们设置平滑滚动过渡。以前这需要 花哨的 JavaScript,但 scroll-behavior 将使我们能够在 CSS 中原生实现这一点,一旦浏览器支持得到改进。

内容之间的跳转以平滑过渡的方式进行动画。

语法

.module {
  scroll-behavior: [ auto | smooth ];
}

scroll-behavior 属性接受两个值,它们实际上只是打开和关闭平滑滚动功能。

  • auto(默认):此值允许在滚动框内的元素之间突然跳转。
  • smooth:顾名思义,此值是在滚动框内的元素之间进行平滑动画过渡。

演示

以下演示仅在撰写本文时支持 Chrome 61+、Firefox 36+ 和 Opera 48+。

查看 CodePen 上 CSS-Tricks 的 scroll-behavior 的滚动框@css-tricks)。

浏览器支持

这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

台式机

ChromeFirefoxIEEdgeSafari
6136不支持7915.4

移动设备 / 平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712715.4

更多信息