什么是：CSS Scroll Snap？

Web 开发人员很难保证良好控制的滚动体验，但幸运的是，一个名为“Scroll Snap”的 css 模块有望提供帮助。它将在滚动操作完成后强制滚动位置结束。 

除其他外，该模块包含控制诸如平移等方面的功能，结合“捕捉位置”，并在滚动容器内产生特定的内容对齐方式。 

W3C 最近发布了 Scroll Snap 作为候选推荐，其中包括经过深思熟虑的实现和示例以及更新的语法。让我们潜入水中。

滚动捕捉术语

要完全理解滚动捕捉的强大功能及其工作原理，我们需要了解它的术语。在本教程中使用这些新术语时，这样做也有助于避免混淆。

滚动捕捉发生在“snapport”或“scrollport”中；但是，两者的含义相同，也可以称为“滚动容器”。这是您的滚动捕捉行为所在的区域，如上图所示（外部虚线边框）。目的是帮助强制执行滚动操作完成后滚动容器的滚动端口将结束的滚动位置。

这个“snapport”的每一项都被称为一个“snap area”，是你要定位的对象。每个捕捉区域都包含一个“捕捉位置”，也由滚动容器的“捕捉位置”定义，并由上图中的红色虚线表示。

抛开这些术语，让我们回顾一些示例并探索此功能在现实生活中是如何工作的。如果您想了解更多关于其他类型用例的信息，您可以从这个 W3C 示例开始，使用照片库作为演示案例，也 可以在这里。Modules August 2017 CR 规范中还有一个有趣的更新，其中说明了 :target 应该具备的一些有趣的行为。

滚动快照演示

在撰写本文时，最好查看以下 safari 11 演示，因为其他浏览器（虽然注意到支持）实际上并不完全支持新语法，尽管有来自caniuse 和个人测试的数据。

下面的示例仅展示了启动 CSS Scroll Snap 行为所需的非常少的属性，并且不包括任何 polyfill，因为我 无法找到使用最新发布的语法运行的工作 polyfill 。还需要注意的是，任何滚动容器都需要另一个熟悉的 CSS 属性，称为overflow.

See the Pen  Scroll Snap Demo by Envato Tuts+ (@tutsplus)  on CodePen.

上面的演示利用 y 轴作为捕捉位置，但是，您可以在 x 轴上轻松完成。如果您的系统上没有 Safari 11，这里的屏幕录像显示了上面提供的现场演示功能。

面板整齐地卡扣。请注意，当我滚动时，滚动动量会接管并前进到下一个框。很活泼吧？

这是第二个演示，展示了 y 轴以画廊式的方式显示图像。

See the Pen  Scroll Snap Demo Horizontal Axis by Envato Tuts+ (@tutsplus)  on CodePen.

当用户水平滚动时，无论图像大小如何，动量都会落在滚动端口和捕捉区域的死点。

滚动捕捉属性和语法

现在是时候回顾和解释关于它们的语法和接受值的实际属性了。

当前的 Scroll Snap 规范仅包含四个属性，每个属性都起着重要作用。这四个属性是……

• scroll-snap-type

• scroll-snap-align

• scroll-padding

• scroll-margin

让我们仔细看看并解释每个人的作用、定义的位置以及接受的值类型。

scroll-snap-type

此属性指定滚动容器实际上是“滚动捕捉容器”还是“捕捉”、捕捉的严格程度以及使用哪些轴。如果未指定严格值，则将该proximity值作为默认值传递。该属性还接受另一个有助于定义“捕捉轴”的值。这将允许您传入您选择的两个值（即scroll-snap-type: y mandatory）。在这种情况下，我们声明snap-typey 轴上出现的唯一且是mandatory。

Scroll Snap Axis: x, y, block, inline, 或both

• x：滚动容器仅在其水平轴上捕捉位置。

• y：滚动容器仅在其垂直轴上捕捉到捕捉位置。
  

• block: 滚动容器仅捕捉到其块轴上的捕捉位置。

• inline: 滚动容器仅捕捉到其内联轴中的捕捉位置。
  

• both：滚动容器独立地捕捉到其两个轴上的捕捉位置（可能捕捉到每个轴上的不同元素）。

Scroll Snap Strictness: none,proximity和mandatory

• none: 如果在滚动容器上指定，则滚动容器不能对齐。

• proximity: 如果在滚动容器上指定，当没有活动的滚动操作时，滚动容器需要对齐到对齐位置。如果存在可到达的捕捉位置，则滚动容器必须在滚动终止时捕捉（如果不存在，则不会发生捕捉）。

• mandatory：如果在滚动容器上指定，则滚动容器可能会在滚动终止时捕捉到捕捉位置。

scroll-snap-align

scroll-snap-align 属性将滚动容器的对齐位置指定为其对齐区域（作为对齐主体）在其对齐容器的对齐端口（作为对齐容器）内的对齐。这两个值分别指定内联轴和块轴中的捕捉对齐。如果仅指定一个值，则第二个值默认为相同值。接受的值为none、center和。 startend

简而言之，该属性是为滚动容器的后续子项定义的，并接受两个值。第一个值代表 x 轴，而秒代表 y 轴；例如scroll-snap-align: start center……

• none：此框不定义指定轴中的捕捉位置。

• start: 此框的滚动捕捉区域在滚动容器的捕捉端口内的开始对齐是指定轴上的捕捉位置。

• end: 此框的滚动捕捉区域在滚动容器的捕捉端口内的结束对齐是指定轴上的捕捉位置。

• center：此框的滚动捕捉区域在滚动容器的捕捉端口内的中心对齐是指定轴上的捕捉位置。

scroll-padding

滚动填充值在声明时充当滚动容器的偏移量，并减少被视为“可见”的可滚动区域。这对布局、滚动原点、初始位置以及元素是否被视为实际可见都没有影响。有两种形式，很像 CSS 中的标准填充属性，但是也有一个速记版本，例如scroll-padding-top, 和scroll-padding-bottom。

scroll-margin

当为定义用于将项目捕捉到快照端口的滚动捕捉区域的滚动容器声明时，这些值表示开始。它的工作方式和行为与属性相同，margin包括速记和速记变体，例如 scroll-margin-top, 和 scroll-margin-bottom。

最后

由于最近发布到当前编辑草稿的更新， 您会发现缺乏全面的支持，也没有我提到的 polyfill。该物业也有可能scroll-snap-stop 处于危险之中，并且可能在 CR 期间被丢弃。我还在研究和实验过程中发现， min-height此时在滚动捕捉容器上定义时不起作用。可能还有其他属性具有相同的结果，如果您找到这些属性，请将它们留在下面的评论中。 

所以，这就是 CSS Scroll 从一个高度的概述中捕捉。这值得么？你会觉得有用吗？还是应该把它放在宇宙的黑暗角落，再也找不到了？在下方留下您的评论，并一如既往地祝您编码愉快！