滚动捕捉的基本概念

在定义滚动捕捉之前，您需要在滚动容器上启用滚动。您可以通过确保滚动容器具有定义的大小以及启用了overflow来实现。

然后，您可以使用以下两个关键属性在滚动容器上定义滚动捕捉

• scroll-snap-type：使用此属性，您可以定义是否可以捕捉到可滚动的视口，捕捉是必需的还是可选的，以及捕捉应发生的轴。
• scroll-snap-align：此属性设置在滚动容器的每个子元素上，您可以使用它来定义每个子元素的捕捉位置或不存在捕捉位置。
• scroll-snap-stop：此属性确保在滚动过程中捕捉到子元素，并且不会将其跳过。
• scroll-margin：此属性可以设置在滚动过程中捕捉到的子元素上，以创建从定义的框开始的偏移量。
• scroll-padding：此属性可以设置在滚动容器上以创建捕捉偏移量。

下面的示例演示了沿垂直轴的滚动捕捉，这是由scroll-snap-type定义的。此外，scroll-snap-align应用于<section>元素的所有子元素，指示每个子元素的滚动应停止的点。

scroll-snap-type属性需要知道滚动捕捉发生的方位。这可以是x、y或逻辑映射block或inline。您还可以使用关键字both使滚动捕捉沿两个轴工作。

您还可以传入关键字mandatory或proximity。mandatory关键字告诉浏览器内容是否必须捕捉到某个点，无论滚动位置在哪里。proximity关键字表示内容可能会捕捉到该点，但并非必须。

使用mandatory可以创建非常一致的滚动体验——您知道浏览器始终会捕捉到每个定义的点。这意味着您可以确信，您期望位于屏幕顶部的某个内容在滚动完成后会出现在那里。但是，如果内容比您预期的要大，则可能会导致问题——用户可能会发现自己处于无法滚动并查看内容中某个特定点的令人沮丧的境地。因此，应仔细考虑mandatory的使用，并且仅在您知道屏幕上或可滚动区域中任何时候的内容量的情况下使用。

proximity值仅在子元素靠近时将其捕捉到某个位置，浏览器确定确切的距离。

在下面的示例中，您可以将值在mandatory和proximity之间更改，以查看这对滚动体验的影响。

在上面的示例中，滚动容器上都设置了height: 300px;和overflow-y: scroll;。

如果内容没有溢出其容器，则没有内容可以滚动。

scroll-snap-align属性的有效值包括start、end、center和none。这些值用于指示内容应捕捉到的滚动容器中的点。在下面的示例中，您可以更改scroll-snap-align的值，以查看这如何改变滚动行为。

如果scroll-snap-type为mandatory，并且子元素上的scroll-snap-align设置为none或未设置（在这种情况下，默认为none），则用户将无法滚动该元素到视图中。

当使用start或end时，如果您不希望内容捕捉到滚动容器的边缘，或者当使用center时希望捕捉位置略微偏离中心，请使用scroll-padding属性或其等效的详细值添加一些填充。

在下面的示例中，scroll-padding设置为40px。当内容捕捉到第二和第三部分的开头时，滚动会在距该部分开头 40 像素处停止。尝试更改scroll-padding的值以查看这如何改变距离。

如果您有fixed元素（例如导航栏），可能会与滚动的内容重叠，这可能很有用。通过使用scroll-padding，您可以为固定元素保留空间，如以下示例所示，其中<h1>元素在内容在其下方滚动时保持在屏幕上。如果没有填充，则标题在捕捉发生时会与部分内容重叠。

scroll-margin属性或详细的滚动边距值可以设置在子元素上，定义从定义的框开始的外侧。这允许为不同的子元素提供不同数量的空间，并且可以与父元素上的scroll-padding结合使用。在下面的示例中尝试一下。

使用scroll-snap-stop属性，您可以指定滚动是否必须捕捉到定义的捕捉点。在上面的示例中，这意味着滚动将在每个部分的开头停止或能够跳过部分。

通过此属性定义，您可以确保用户看到滚动的每个部分，并且不会意外地滚动过去。但是，此设置也可能对用户体验产生负面影响，因为它会阻止用户快速滚动到他们想要的内容。

• CSS 滚动捕捉模块
• 使用 CSS 滚动捕捉实现良好控制的滚动 在 web.dev 上 (2021)
• 实用的 CSS 滚动捕捉 在 CSS-Tricks 上 (2020)
• CSS 滚动捕捉 在 12 Days of Web 上 (2019)
• 滚动捕捉示例 在 Codepen 上