随着Web平台的发展，它也获得了类似原生应用的特点。其中一个功能是CSS Scroll Snap Module。Scroll snap允许开发人员定义界面在滚动操作期间应该移动的距离。您可以使用它来构建幻灯片放映或分页界面 - 目前需要JavaScript和DOM操作才能完成。 Scroll snap作为一项功能经历了很多变化。早期的2013版规范 - 当时称为Scroll Snap Points–定义了一种基于坐标和像素的方法来指定滚动距离。此版本的规范是在Microsoft Edge，Internet Explorer 11和Firefox中实现的。 Chrome 69+和Safari 11+实现了规范的最新版本，该版本使用了盒子对齐模型。这就是我们将在本节中关注的内容。 警告： 当前浮动在Web上的许多滚动快照教程都基于早期的CSS Scroll Snap Points规范。标题中“points”一词的出现是教程可能依赖于旧规范的一个标志。然而，更可靠的指标是存在scroll-snap-points-x或scroll-snap-points-y属性。 由于滚动捕捉非常适合幻灯片放映布局，这就是我们要构建的内容。这是我们的标记。
这就是我们所需要的一切。我们不需要具有外部包裹元件和内部滑动容器。我们也不需要任何JavaScript。 现在我们的CSS：
* {
box-sizing: border-box;
}
html, body {
padding: 0;
margin: 0;
}
.slideshow {
scroll-snap-type: x mandatory; /* Indicates scroll axis and behavior */
overflow-x: auto; /* Should be either `scroll` or `auto` */
display: flex;
height: 100vh;
}
.slideshow img {
width: 100vw;
height: 100vh;
scroll-snap-align: center;
}
添加scroll-snap-type以.slideshow创建滚动容器。此属性的值x mandatory描述了我们要滚动的方向以及滚动快照严格性。在这种情况下，该mandatory值告诉浏览器，当没有活动的滚动操作时，它必须捕捉到捕捉位置。使用display: flex只是确保我们的所有图像水平堆叠。 现在我们需要的另一个属性是scroll-snap-align。此属性指示如何在滚动容器的捕捉端口内对齐每个图像的滚动捕捉区域。它接受三个值：start，end，和center。在这种情况下，我们使用了center这意味着每个图像将在视口中居中，如下所示。 
