CSS 滚动捕捉：它是什么？我们需要它吗？对于 Web 开发人员来说，保证良好控制的滚动体验可能很困难，但幸运的是，名为

对于 Web 开发人员来说，保证良好控制的滚动体验可能很困难，但幸运的是，名为“Scroll Snap”的 CSS 模块有望提供帮助。它将在滚动操作完成后强制执行滚动位置结束的位置。

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

滚动捕捉

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

滚动捕捉术语

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

此“快照”的每个项目都称为“快照区域”，并且是您要定位的对象。每个捕捉区域包含一个“捕捉位置”，也由滚动容器的“捕捉位置”定义，并由上图中的红色虚线表示。

了解了术语后，让我们回顾一些示例并探索此功能在现实生活中的工作原理。如果您想了解有关其他类型用例的更多信息，您可以从这个使用照片库作为演示案例的 W3C 示例开始，也可以在此处。2017 年 8 月模块 CR 规范还有一个有趣的更新，其中规定了一些应该具备的有趣行为 :target 。

滚动快照演示

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

下面的示例仅展示了启动 CSS Scroll Snap 行为所需的极少属性，并且不包含任何 Polyfill，因为我无法找到可使用最新发布的语法的工作 Polyfill。值得注意的是，任何滚动容器都需要另一个熟悉的 CSS 属性，定义为.overflow

上面的演示利用 y 轴作为捕捉位置，但是，您也可以在 x 轴上轻松完成此操作。如果您的系统上没有 Safari 11，这里有一个屏幕录制，显示上面提供的实时演示功能。

面板整齐地卡合。请注意，当我滚动时，有一个点，滚动动量接管并前进到下一个框。相当敏捷吧？

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

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

滚动捕捉属性和语法

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

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

scroll-snap-type
scroll-snap-align
scroll-padding
scroll-margin

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

`scroll-snap-type`

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

Scroll Snap Axis: x，y，block，inline，或者both

x：滚动容器仅捕捉到其水平轴上的捕捉位置。
y：滚动容器仅捕捉到其垂直轴上的捕捉位置。
block：滚动容器仅捕捉到其块轴上的捕捉位置。
inline：滚动容器仅捕捉到其内联轴上的捕捉位置。
both：滚动容器独立地捕捉到其两个轴上的捕捉位置（可能捕捉到每个轴上的不同元素）。

Scroll Snap Strictness：none，proximity，和mandatory

none：如果在滚动容器上指定，则滚动容器不得捕捉。在CSS滚动快照（scroll snapping）的上下文中，proximity和mandatory是两种不同的滚动快照行为模式，它们决定了滚动行为如何响应用户的操作以及如何与定义的快照点交互。
Mandatory (强制性) 模式:
- 在这种模式下，滚动快照的行为是强制性的，也就是说，当用户滚动到一个快照点附近时，滚动会立即停止并精确地对齐到该点。
- 这种模式适用于需要精确控制滚动位置的场合，例如，图像画廊或轮播图，用户希望每次滚动停止时都能看到完整的图像或内容项。
- 强制性滚动快照可以通过设置scroll-snap-type属性为mandatory来实现。
示例代码：
```
.container {
  scroll-snap-type: mandatory;
}
.item {
  scroll-snap-align: center;
}
```
Proximity (邻近性) 模式:
- 在邻近性模式下，滚动快照的行为更加灵活。当用户滚动到快照点附近时，滚动不会立即停止，而是会继续滚动直到用户停止滚动，然后浏览器会将滚动位置对齐到最近的快照点。
- 这种模式提供了一种更加自然的滚动体验，适用于用户希望在滚动过程中浏览内容，但在停止滚动时希望内容能够对齐到特定区域的情况。
- 邻近性滚动快照可以通过设置scroll-snap-type属性为proximity来实现。
示例代码：
```
.container {
  scroll-snap-type: proximity;
}
.item {
  scroll-snap-align: center;
}
```

总结来说，mandatory模式提供了一种立即对齐的滚动体验，而proximity模式则在用户滚动停止后对齐到最近的快照点，提供了一种更加平滑和自然的滚动感觉。选择哪种模式取决于你希望用户在你的网页上有什么样的滚动体验。

`scroll-snap-align`

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

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

none：此框不定义指定轴上的捕捉位置。
start：滚动容器的捕捉端口内此框的滚动捕捉区域的开始对齐是指定轴上的捕捉位置。
end：此框的滚动捕捉区域在滚动容器的捕捉端口内的结束对齐是指定轴上的捕捉位置。
center：此框的滚动捕捉区域在滚动容器的捕捉端口内的中心对齐是指定轴上的捕捉位置。

`scroll-padding`

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

`scroll-margin`

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

原文链接