图解CSS：CSS滚动捕捉这一章节分成两个部分，第一部分主要介绍了 CSS 滚动捕捉理论方面的知识，详细介绍了 CSS 滚动捕捉中的 scroll-snap-type 、scroll-snap-align 、scroll-margin 、scroll-padding 以及 scroll-snap-stop 等属性。并且通过一些示例向大家展示了它们怎么使用。在第二部分，也就是接下来的内容中，从简单的示例着手（有些示例在第一部分也出现过），慢慢过渡到复杂的示例，比如模拟 iOS列表向左滑动的交互效果。如果你感兴趣的话，请继续往下阅读。

滚动捕捉的实例

前面我们花了较长的篇幅向大家展示了滚动捕捉相关的特性。接下来我们由易到难，来看看 CSS 滚动捕捉能帮我们做哪些事情。接下来会从简单地示例着手，慢慢过渡到更为复杂的用例。

列表滚动

在我们的日常开发中，时常都会碰到列表滚动的效果。比如下图这样的效果：

往往面对这样的需求，开发者都会借助 JavaScript （比如 Swiper ）。时至今日，我们就可以使用 CSS 滚动捕捉来实现。为了节约构建 UI 样式时间，我们来实现一个图片列表滚动的效果。先从简单的开始：

<!-- HTML -->
<div class="container">
    <img src="https://picsum.photos/500/300?random=1" alt="" />
    <img src="https://picsum.photos/500/300?random=2" alt="" />
    <img src="https://picsum.photos/500/300?random=3" alt="" />
    <img src="https://picsum.photos/500/300?random=4" alt="" />
    <img src="https://picsum.photos/500/300?random=5" alt="" />
    <img src="https://picsum.photos/500/300?random=6" alt="" />
    <img src="https://picsum.photos/500/300?random=7" alt="" />
</div>

/* CSS */
.container {
    overflow-x: auto;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding: 20px;
}

img {
    scroll-snap-align: start;
}

你将看到下面这样的效果：

注意，示例中我们还使用了 scroll-behavior:smooth; ，它也是用来改善滚动体验的，如果你对该特性感兴趣的话，可以阅读《改变用户体验的滚动新特性》一文。

如果你体验了上面的示例，你会发现，你每次滚动的时候，一不小心可能会同时滚动多张图片。或许这样的效果并不是你所要的，你可能是需要每次滚动两张图片：

实现该效果，可以在第1、3、5、... 按这样的类推，在滚动项目（即 img ）上显式设置 scroll-snap-stop 属性，并取值为 always：

img:nth-of-type(2n + 1) {
    scroll-snap-stop: always;
}

体验下面的效果，会有较强的体感：

注意，这个示例中采用了伪类选择器 :nth-of-type()，其中 2n + 1，就是用来获取奇数的 img。

还有另外一种场景，也是时常能看到的效果。那就是每次滚动的时候，滚动项目都在滚动容器的中间：

要实现上图这样的效果很简单，我们只需要把滚动项目中的 scroll-snap-align 的设置为 center 即可：

img {
    scroll-