当 Firefox 68 下个月正式发布时，它将包含更新的 CSS Scroll Snap 规范。这意味着 Firefox 将支持与 Chrome 和 Safari 相同版本的规范。滚动捕捉将在所有实现它的浏览器中以相同的方式工作。

在这篇文章中，我会快速概述一下滚动捕捉是什么。我也会解释为什么浏览器在一段时间内会拥有不同版本的规范。

什么是 CSS Scroll Snap？

CSS Scroll Snap 规范为我们提供了一种在 CSS 中捕捉页面或滚动组件中不同元素的方法，这与手机和平板电脑上的原生应用程序非常相似。

滚动捕捉可以在 `x` 或 `y` 轴上发生。这意味着您可以根据需要在内联方向和块方向上滑动。在下面的示例中，我展示了滚动捕捉的简单用法。我有一个滚动框，由于指定了 `overflow-y` 以及框的高度，所以它有一个垂直滚动条。然后我添加了 `scroll-snap-type: y mandatory` 属性，它在 y 轴上提供了强制滚动。您可以在 CodePen 中查看此示例。

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

查看 CodePen 示例。

强制滚动意味着浏览器必须捕捉到一个滚动点，无论用户在内容中的哪个位置。另一个可用关键字是邻近。邻近会导致浏览器仅在滚动接近该点时才捕捉到滚动点。这可以防止用户无法滚动到特定点的情况，因为该点位于可见区域之外。

除了滚动容器上的 `scroll-snap-type` 属性之外，我还需要添加 `scroll-snap-align` 属性来定义滚动将捕捉到的点。此属性接受 `start`、`center` 或 `end` 的值，这些值定义滚动应该捕捉到子容器中的哪个位置。

.scroller section {
  scroll-snap-align: start;
}

对于许多用例来说，这些关键属性将是您让滚动捕捉生效所需的全部。但是，该规范定义了一种向滚动点添加填充和/或边距的方法。这在某些情况下可能有所帮助，在这种情况下您不希望滚动直接捕捉到可滚动区域的边缘。

例如，在下面我使用了 `scroll-padding-top` 属性来留出间隙。这为容器顶部的固定元素腾出空间。如果我不这样做，我会冒着内容最终出现在该条形下方的情况。

h1 {
  position: sticky;
  top: 0;
}

.scroller {
  height: 300px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 40px;
}

.scroller section {
  scroll-snap-align: start;
}

在 CodePen 上查看此示例。

在 MDN 上，我们有 各个 Scroll Snap 属性的页面。使用 Scroll Snap 的指南提供了许多额外的示例。属性页面都显示了这些属性的浏览器支持状态。

Firefox 68 中发生了什么变化？

Firefox 68 根据当前版本的规范实现了上面描述的滚动捕捉版本。这与 Chrome 的实现相匹配。如果您已经实现了在 Chrome 中工作的滚动捕捉，那么您不需要做任何事情 - 您的滚动捕捉现在将在 Firefox 中工作。

如果您使用了在 Firefox 39 版本中实现的旧版本规范，那么您应该更新该代码以使用新版本。除了实现新规范之外，Firefox 68 将删除对旧版规范中属性的支持。

如果您使用了 `scroll-snap-type-x` 和 `scroll-snap-type-y`，那么您正在使用旧规范。这些属性在 Firefox 68 中被移除。`scroll-snap-type` 现在用于设置 `x` 或 `y` 方向以及滚动捕捉的类型。

为什么有两个版本的滚动捕捉？

CSS 规范以迭代的方式开发，并且浏览器在规范开发过程中开始实现规范。这是一个重要的步骤。CSS 工作组需要知道在浏览器中实现规范是可能的。测试实现让 Web 开发人员尝试新规范并针对它提交问题。通常，这些实现发生在浏览器标志之后。在过去，我们使用了供应商前缀版本来公开它们进行测试。然而，有时一个规范看起来处于良好的状态，因此被实现了，但随后需要进行更改。这就是开发新浏览器功能的方式。

在某些情况下，这样的更改意味着必须永远支持旧属性和新属性。`grid-gap` 属性就是一个很好的例子。该属性已被重命名为 `gap`。由于在野外广泛使用，`grid-gap` 属性被保留为别名。在 Scroll Snap 的情况下，旧实验规范的使用非常少，因此 `scroll-snap-type` 属性已以不向后兼容的方式更新。这意味着旧版本将在此时被移除。

向后兼容性和滚动捕捉

Scroll Snap 是那些可以在许多情况下充当良好增强的规范之一。如果浏览器不支持滚动捕捉，则会发生常规滚动。我们在 MDN 上有信息可以帮助您 实现旧规范作为旧版 Firefox 版本的回退，如果您的分析显示这是必要的。对于大多数用例来说，这不太可能需要。

很高兴看到另一个 CSS 规范获得了广泛的浏览器实现。如果您过去使用过 JavaScript 来实现滚动捕捉效果，那么现在可能是查看 CSS 版本的好时机！您可能会发现它的性能比 JavaScript 解决方案好得多。