CSS滚动捕捉模块是一个网络标准，可让我们对网页上的滚动进行一些控制，以便我们可以使用户滚动到页面的某些部分，而不是页面上的任何地方。
滚动是网站上执行最多的操作之一。 多年来，浏览器已经改进了滚动性能，以匹配用户的敏捷手指强度。 并且，开发人员已经创造性地使用了滚动功能来获得更好的或开箱即用的用户体验。
但是，当涉及编码和滚动之间的相关性时，只有JavaScript似乎对后者具有任何控制权。 在很长一段时间内都是这样，但是随着滚动捕捉点的引入 ，CSS开始迎头赶上。
另请参阅： 网站设计中正确滚动的15个示例
没有滚动捕捉点的滚动
通常，我们滚动的速度不会很慢，尤其是在手机上。 滚动速度越快，停止滚动时对屏幕最终位置的控制就越少。
假设您正在浏览网站，图片库或在线幻灯片上的一系列产品图片。 在此类应用程序中，您希望每次滚动时都能看到整个产品，照片或幻灯片 。 不仅产品图像，照片或幻灯片的一部分 。
例如，在下面的演示中，无论何时用户停止滚动，您都可以看到，只有大约一半的图像在屏幕底部可见 。 但是，大多数用户希望完全查看最后一张图像。
使用滚动捕捉点滚动
这是我们引入CSS滚动捕捉点的地方 。 这个名字不言而喻； 这是一个CSS标准，允许我们在滚动时将项目对齐到位 。
-
scroll-snap-type -
scroll-snap-points-x -
scroll-snap-points-y -
scroll-snap-coordinate -
scroll-snap-destination
浏览器支持
这些属性需要相关浏览器的-webkit和-ms前缀 。 在撰写本文时，Chrome和Opera不支持CSS滚动捕捉。
请注意，不久的将来，用户代理可能会删除最后四个属性。 相反， 可以按照本规范中的定义创建 新属性 ，即scroll-snap-align ， scroll-snap-margin和scroll-snap-padding 。
但是，它们将具有与以前的属性相似的目的 。 目前，前一组属性可以正常工作。
物产
您需要将scroll-snap-type属性添加到滚动容器 （其子元素在滚动时溢出的容器元素）。 它指定了快速动作的严格性 。 它可以采用三个值：
-
mandatory–滚动完成后，滚动将在相关的捕捉点捕捉 -
proximity–不严格于mandatory； 取决于UA的判断，元素是否会在给定的捕捉点捕捉 -
none-不执行捕捉
scroll-snap-points-x和scroll-snap-points-y属性也属于滚动容器 。 它们是指x和y轴上将存在捕捉点的点。 它们的值由repeat()函数给出 。 例如，如果要沿x轴以100px的间隔添加捕捉点，则需要使用scroll-snap-points-x: repeat(100px)规则。
scroll-snap-destination属性也已添加到滚动容器中。 它在捕捉目标所在的容器上定义了一个坐标 。 正是在这个捕捉目的地，容器的子级在滚动时将捕捉到位。
您可以将scroll-snap-coordinate属性与scroll-snap-destination结合使用。 您需要将其添加到容器的子元素中。 它定义了子元素的坐标，当用户滚动屏幕时，这些子元素将与其滚动容器的目标坐标对齐。
请注意，您不必一次使用所有属性。 只有scroll-snap-type是强制性的。 除此之外，您可以定义单个捕捉点，也可以使用目标坐标组合。
代码示例
这是一个典型的滚动容器的示例代码片段，其中包含 垂直方向的滚动以及内部的某些图像 。 它输出了可以在本文开头找到的演示。
<div> <img src='Pizza.png' alt='pizza'> <img src='Noodle.png' alt='noodle'> <img src='Burger.png' alt='burger'> <img src='Juice.png' alt='juice'> </div>
div {
width: 300px;
height: 300px;
overflow: auto;
...
}
div > img {
width: 250px;
height: 150px;
...
}
现在，我们向滚动容器添加一些捕捉点 ：
div {
width: 300px;
overflow: auto;
scroll-snap-points-y: repeat(150px);
scroll-snap-type: mandatory;
}
在下面，您可以看到添加CSS捕捉点后的输出结果。 请注意，只要滚动停止而底部图像仅部分可见，则在滚动端口捕捉到其上方的捕捉点之后，将显示完整图像 。
另请阅读： 具有酷滚动效果JavaScript库