作者：您是否曾经尝试在滚动后捕捉页面内容？有很多 JavaScript 库提供了此功能。以下是一些示例
- https://github.com/peachananr/purejs-onepage-scroll
- http://wtm.github.io/jquery.snapscroll/
- http://guidobouman.github.io/jquery-panelsnap/
- http://alvarotrigo.com/fullPage/
由于这是一个与页面布局和行为相关的常见用例，W3C 发布了一个纯 CSS 滚动捕捉方法。
CSS 滚动捕捉（自 7 月份的 Firefox 39 版本发布以来可用）允许您控制在滚动溢出元素时停止的位置。这使您可以将页面划分为逻辑部分，从而创建更流畅、更易于交互的用户界面。触摸设备尤其受益于此功能，用户可以轻松地浏览页面，而不是点击分层结构。
图片库
图片库无疑是滚动捕捉最常见的用例：用户可以通过滑动或滚动页面来翻阅图片，一次查看一张图片。所以让我们看看如何使用新属性来实现这一点
<pre>img {
width: 200px;
}
.photoGallery {
width: 200px;
overflow: auto;
white-space: nowrap;
scroll-snap-points-x: repeat(100%);
scroll-snap-type: mandatory;
}
</pre>
相关的 HTML 代码如下所示
<pre><div class="photoGallery">
<img src="img1.png"><img src="img2.png"><img src="img3.png">
</div>
</pre>
这是一个在线演示
查看 Potch 在 CodePen 上创作的 Pen wKvYdK（@potch）。
上面的代码创建了一个包含三个图像的简单图片库，可以水平滚动浏览。
在这种情况下，图像及其包含的 <div> 的大小设置为 200 像素。overflow: auto; 在支持它的客户端上显示滚动条。white-space: nowrap; 用于使所有图像水平对齐。“<a href="https://mdn.org.cn/en-US/docs/Web/CSS/scroll-snap-points-x" target="_blank">scroll-snap-points-x</a>: repeat(100%);” 在容器 <div> 的视口宽度的 100% 处设置一个重复的水平捕捉点，在本例中为 200 像素间隔。设置 <a href="https://mdn.org.cn/en-US/docs/Web/CSS/scroll-snap-points-x">scroll-snap-type</a>: mandatory; 会强制捕捉。视口将始终捕捉到捕捉点，因此显示屏永远不会停留在两个图像之间。
项目列表
您可能已经看过很多在线产品页面，这些页面列出了不同的功能，每个功能都配有一张图片和一个描述，或者一个显示一系列用户评价的界面。
在这些情况下，滚动捕捉允许您对齐部分，以便最大程度地利用显示空间。
<pre>.features {
width: 400px;
height: 250px;
padding: 0;
overflow: auto;
scroll-snap-type: proximity;
scroll-snap-destination: 0 16px;
}
.features > section {
clear: both;
margin: 20px 0;
scroll-snap-coordinate: 0 0;
}
img {
width: 50px;
height: 50px;
margin: 5px 10px;
float: left;
}
section:last-child {
margin-bottom: 60px;
}
</pre>
以下是相关的 HTML 代码
<pre><div class="features">
<section id="feature1">
<img src="feature1.png"/>
<p>Lorem ipsum...</p>
</section>
<section id="feature2">
<img src="feature2.png"/>
<p>Lorem ipsum...</p>
</section>
...
</div>
</pre>
这是一个在线演示
查看 Potch 在 CodePen 上创作的 Pen NGWOjN（@potch）。
在上面的示例中滚动时，每个功能部分都会定位，使其顶部与视口顶部对齐，以显示尽可能多的文本。这是通过将 <a href="https://mdn.org.cn/en-US/docs/Web/CSS/scroll-snap-coordinate" target="_blank">scroll-snap-coordinate</a>: 0 0; 应用于部分来实现的。两个零分别指代元素将捕捉到容器元素的 x 和 y 坐标。<a href="https://mdn.org.cn/en-US/docs/Web/CSS/scroll-snap-destination" target="_blank">scroll-snap-destination</a>: 0 16px; 定义了内部元素应捕捉到的容器元素内的偏移位置。在本例中，该位置位于容器顶部的下方 16 像素处，以便部分顶部的文本在顶部具有一定的边距。
除了当前在 CSS 滚动捕捉点规范中定义的属性外，Gecko 还实现了其他属性 scroll-snap-type-x 和 scroll-snap-type-y，用于分别为每个轴设置捕捉类型。这些长格式属性可能会在将来添加到规范中。
目前，捕捉点只能通过坐标设置，这些坐标可以引用容器元素的起始边或容器元素内的坐标。有时需要进行一些计算才能将它们设置在正确的位置。此功能的未来扩展可能会扩展其功能，以便能够在盒模型上设置捕捉点，这将使其更容易放置捕捉点。在 www-style 邮件列表中已经对此进行了讨论。
这个新功能是否引起了您的兴趣？那么是时候尝试一下了！如果您不记得如何使用不同的属性，您始终可以参考 MDN 上的文档。
7 条评论