介绍这个新CSS属性之前，我想要先讲一下使用JavaScript实现的一个功能—— 将一个元素锁定在滚动视窗之中。众所周知，使用JavaScript实现滚动的行为还是有些难度的。CSS Scroll Snap Points 新规范指出你仅仅使用几行简单的CSS代码就可以实现以上所述的功能。新出现的Web技术总是在不断的变化之中，这个规范也处于不断的修改之中。也存在“旧的”与“新的”属性与值。随着浏览器的不断地支持，这个新属性的前景还是不错哒~ 在规范处于中间的阶段，我将带你们获取浏览器对其最大的支持性。

CSS最近介绍了一个关于scroll snap points的新功能，为触控以及输入设备的用户提供一个流式、精确的滚动体验。关于创建scroll snap效果，有许多jquery插件可供你选择，但是我们今天所讲述的不是通过安装一个插件来控制滚动的行为，而是使用原生的CSS scroll snap points来实现。

@evilmartians的《滚动的特性》一文介绍了目前有关于滚动相关的特性。今天我想花点时间重新整理一下，时至今日，CSS中为浏览器滚动提供的相关新特性究竟能给用户带来哪些新的体验。

如果考虑周全，滚动捕捉可以是一个有用的设计工具。CSS Scroll Snap Points允许你连接到浏览器的本机滚动交互，因此你的界面感觉无缝且平滑。随着JavaScript API的出现，这些功能将变得更加强大。CSS Scroll Snap（CSS 滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。

CSS 滚动捕捉是 W3C 中 CSS Scroll Snap Module Level 1 模块，可以用来创建一个可滚动的容器，可用来替代以往依赖 JavaScript 脚本来创建滑块组件。也就是说，使用该特性（CSS 的滚动捕捉特性）是快速将元素制作成可滚动容器的一种简单快速的方法。另外，CSS 滚动捕捉特性还可以帮助我们给用户更好的体验。接下来和大家一起来探讨这个 CSS 新特性，即 CSS 滚动捕捉。

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