特别声明，本文翻译自@alligatorio的文章ControlPageScrollinCSSUsingScrollSnapping，受译者能力所限，翻译可能有误有不足之处。欢迎指出。如需转载，请注明出处。ScrollSnapping“ScrollSnapping”是你一定见过的技术。如果实施不当，可能会非常烦人，并给用户带来糟糕的浏览体验。但是，如果实施得当，它可能是实施显示内容的功能（例如图片库）的好方法。以前滚动捕捉只能通过JavaScript实现，但现在得益于新的CSS滚动捕捉模块“CSSScrollSnapmodule”，这种效果已经可以通过CSS实现。同时，好在浏览器可以根据用户的滚动方式，自动控制判断是否使用抓取点“捕捉点”进行抓取。这避免了捕捉点阻碍流畅导航的糟糕用户体验。让我们简要了解一下CSS中的滚动对齐是如何工作的。概述与CSS网格或Flexbox的使用类似，滚动捕获的使用需要定义父/容器元素，容器中的子元素将根据容器元素上定义的规则进行捕获。与ScrollSnapping相关的一些属性适用于容器元素，而其他一些适用于子元素。容器元素属性：scroll-snap-type容器元素最重要的属性是scroll-snap-type。它使一个普通元素成为一个snap容器“snapcontainer”元素，通过这个属性可以定义滚动snap轴“snapaxis”（取值可以是：x,y,block,inline,both），而这个属性还可以定义滚动捕获的严格程度“strictness”（取值可以是：none、proximity、mandatory）。假设你想让一个容器在y轴上滚动，并且在任何情况下都滚动捕获，那么你可以像这样使用它scroll-snap-type属性：.container{scroll-snap-type:ymandatory;}如果你想scrollsnapping在两个方向上，而且snapping行为不需要太严格，那么你可以这样写：填充，它允许为容器设置填充以避免在容器边缘触发捕捉动作。此属性的赋值语法与填充属性的赋值语法相同。子元素属性：scroll-snap-alignscroll-snap-align可能是滚动容器元素的子元素中最重要的属性。它可以接收以下值，none、start、end、center，以指定元素是否应在开始、中间或结束处滚动。基于滚动轴，并假设当前的文本方向是从左到右，则开始可以是顶部或左侧，结束可以是底部或右侧。您必须设置元素的scroll-snap-align属性值，因为它的初始值为none，这意味着不会执行对齐。scroll-marginscroll-margin属性的使用方法与margin属性相同，它可以在元素中设置不同的捕获区域。scroll-snap-stopscroll-snap-stop属性的取值可以是：normal和always，通过这个属性可以指定元素是否强制应用对齐点，即使用户的滚动行为通常会导致对齐跳过。此属性的初始值是正常的。案例接下来，我们不要停留在理论和属性的介绍上，而是通过一些简单的例子来说明。如果一个元素的滚动是基于y轴的，并且它的滚动严格设置为强制的，如下代码所示：
