介绍 CSS Scroll Snap Points

在我即将介绍的这个新的 CSS 之前，将元素锁定在视窗中 *在滚动时* 需要使用一些 JavaScript 代码。 您可能知道，JavaScript 在与滚动行为搭配使用时，有其令人难以置信的复杂性。

新的 CSS Scroll Snap Points 规范 有望提供帮助，允许使用非常少的 CSS 代码来实现此类行为。

正如非常新的 Web 技术一样，该规范已随着时间的推移而改变。 存在“旧”和“新”属性和值。 尽管如此，它很有希望，因为 支持 迅速增加。 我将教您如何在这一过渡阶段获得最广泛的支持。

Polyfilled 演示

下面的演示具有水平滚动。 它具有响应性：每个“面板”的宽度和高度都与视窗相同（感谢 vh 和 vw 单位）。

它使用了一个 polyfill，但是为了使用它（而且支持仍然不够高，因此我建议您这样做），您必须支持“旧”值，这就是为什么我还会介绍它们的原因。

查看 Pen 简单的响应式滚动捕捉点演示，作者是 CSS-Tricks (@css-tricks)，在 CodePen 上。

• 如果您在 Firefox 中查看：它具有目前最佳的支持，因此您基本可以清楚地看到原生行为的外观和感觉。
• 如果您在 Chrome 或 Opera 中查看：没有任何支持，因此您在这些浏览器中注意到的任何行为都可以完全归因于 polyfill。
• 如果您在 Edge 或 IE 中查看：它可能根本无法运行。 这些浏览器 具有部分支持，但显然还不够让它运行。
• 如果您在移动设备上查看：iOS 9 支持它（在 iPhone 6 上测试），但我发现缓动行为非常奇怪。 没有 Chrome/Android 支持，但 polyfill 会启动并处理它（在 Android Nexus 6 上测试）。

请注意，我在 Pen 中使用 Autoprefixer 来自动为我提供所有必要的供应商前缀属性。

以下是用于制作魔法的代码

.scroller {
  
  scroll-snap-type: x mandatory;

  /* older spec implementation */
  scroll-snap-destination: 0% 100%;
  scroll-snap-points-x: repeat(100%);
}

.page {
  scroll-snap-align: start;
}

非常简洁！ 让我们逐个分解这些属性。

当前 CSS Scroll Snap 属性

scroll-snap-type

scroll-snap-type: none | mandatory | proximity; 

mandatory 值可能就是您所想的那样：元素 *必须* 在捕捉点上静止，即使没有进行任何活动的滚动操作也是如此。 如果内容以某种方式修改或更新，页面会再次找到捕捉点。

proximity 值与 mandatory 相似，但不太严格。 如果浏览器大小发生变化或添加了内容，它可能会或可能不会再次找到捕捉点，具体取决于它距离捕捉点有多近。

从我使用它进行的尝试来看，mandatory 目前在浏览器中得到更广泛的支持，并具有更一致的行为。

scroll-snap-align

scroll-snap-align: [none | start | end | center] [none | start | end | center]; 

此属性指的是元素的滚动捕捉边距如何与其父滚动容器对齐。 它使用两个值，x 和 y，如果您只使用一个值，它将被解读为简写并重复用于这两个值（类似于填充，其中 padding: 10px; 等于 padding: 10px 10px 10px 10px;）。 此属性不可动画化。

scroll-snap-paddingscroll-padding

注意，scroll-snap-padding 已 重命名 为 scroll-padding。

scroll-snap-padding: <length> | <percentage>;
scroll-padding: <length> | <percentage>;

此属性与视觉视窗中的滚动容器相关。 它与普通填充非常相似，具有相同的值顺序。 例如，scroll-padding: 75px 0 0; 将是 75px 的顶部填充，而其他填充都是 0。 此属性可动画化，因此如果您需要移动滚动捕捉对齐，这将是一个好方法。

旧的 CSS Scroll Snap 属性

如前所述，该规范在过去的一年中一直在迅速变化，并且已经存在一些被认为过时的属性，尽管从遗留支持的角度来看，它们仍然值得了解。

scroll-snap-points

scroll-snap-points-<x or y>: none | repeat(<length>); 

 
scroll-snap-point 指的是滚动方向的轴。 在我们看到的第一个 Pen 中，此属性是在 x 轴上设置的。 在这里，我们使用 scroll-snap-points-y: repeat(100%); 在 y 轴上设置它（因为它是一个垂直滚动）。 百分比指的是您定义为滚动容器的任何内容的填充框。

查看 Pen 简单的滚动捕捉点，作者是 Sarah Drasner (@sdras)，在 CodePen 上。

scroll-snap-destination

此属性和 scroll-snap-coordinate 在值方面非常相似。 scroll-snap-destination 指的是父元素，而 scroll-snap-coordinate 指的是 *元素* 本身。 如果捕捉点纯粹由元素而不是它所在的容器指定，您可能只需要指定 scroll-snap-destination。

scroll-snap-destination: <position>;

此属性允许您指定滚动应该在视窗中的哪个位置捕捉。 例如，假设您想让内容偏移 100px，以便两个面板中的一个面板被戏弄到另一个面板的一侧。 下面的图表显示了滚动捕捉目标将如何让您轻松调整此参数。

当定义为百分比时，该点相对于滚动容器的宽度和高度。

scroll-snap-coordinate

Scroll-snap-coordinate: none | <position>;

此属性允许您指定滚动应该在元素中的哪个位置捕捉。 位置量指的是元素的边框框。 除非您正在做一些非常花哨的事情，否则您可能不需要它。 scroll-snap-coordinate 是唯一可以应用于页面上所有元素的值，其他滚动捕捉属性仅应用于滚动容器。

最后这两个属性，scroll-snap-destination 和 scroll-snap-coordinate 是 *可动画化* 属性，而 scroll-snap-type 和 scroll-snap-points —不可动画化 — 这很有道理。

更多资源

• CSS Scroll Snap Points 模块级别 1 工作草案
• MDN 参考资料
• WebKit 博客文章
• CodePen 合集

浏览器支持

结论

截至本文发布时，规范大约一个月前更新过，并且仍在发展中。支持尚未普及，但即使您需要考虑 polyfill 所需的旧值，使它工作所需的代码也小巧简洁。看到 CSS 中即将出现的新功能非常令人兴奋，如果您进行实验，一定要让规范作者知道您在做什么以及您发现了什么——这确实会影响他们正在进行的工作。我仍然对在生产环境中使用这样的东西持观望态度。这将取决于您在未来遇到代码变更时愿意进行多少迭代。不过，目前，polyfill 的性能相当不错，看到这类东西在 CSS 中落地令人兴奋。