CSS平滑滚动

去年，在构建FilePond 产品页面时，我偶然发现了 scrollIntoView API。这是一个方便的方法，可以指示浏览器将元素滚动到视口中。

本文最初发表于我的个人博客。

可以通过在对象上scrollIntoView添加属性来指示 API 为滚动部分添加动画效果。behaviorscrollIntoViewOption

element.scrollIntoView({ behavior: 'smooth' });

我迅速拿起我的 JavaScript 工具，写了一个小脚本，用来自动检测锚点的点击事件，这样浏览器就能以动画形式跳转到锚点目标位置。这种跳转可能会让人感到晕眩，所以添加动画效果可以大大提升用户体验。

scrollIntoViewOption 目前仅适用于 Firefox 和 Chrome 浏览器。

我把它发到推特上，然后就结束了一天的工作。

然后，汉斯·施皮斯指出，这也可以用 CSS 实现，什么？！

原来scroll-behavior我们可以设置一个 CSS 属性来实现这个功能smooth，它就是这么简单。它几乎就像是awesome: yes-please……。我们可以把这个scroll-behavior属性设置到想要实现平滑滚动效果的容器上，就大功告成了。

我创建了一个新的演示，只使用了 CSS。

在我们疯狂地将此方法应用到我们所有网站之前，有几件事我们需要记住。

滚动距离很重要

如果需要滚动的距离很长，Firefox 会跳过部分内容以限制滚动时间，而 Chrome 则有最大滚动速度，会慢慢滚动到目标位置。

我们可以使用智能 CSS来检测长页面，并有条件地应用平滑滚动样式。

无障碍

观看动画时可能会出现晕动症。为了避免这种情况，您可以将 CSS 属性放在prefers-reduced-motion媒体查询中。遗憾的是，Chrome 浏览器不支持此功能。Safari 浏览器支持此功能，但不支持平滑滚动。

.my-smooth-container {

  scroll-behavior: smooth;

}


@media (prefers-reduced-motion: reduce) {

  .my-smooth-container {

    scroll-behavior: auto;

  }

}

结论

在决定添加新功能时，我们不应该立即想到使用 JavaScript。应该先快速搜索一下，看看是否也能用 CSS 实现。这个scroll-behavior属性可以很好地提升用户体验，但务必确保在页面过长时禁用它，并提供禁用选项，以保证页面的可访问性。