CSS Scroll Snap 了解一下

CSS Scroll Snap，允许开发者在用户完成滚动后将视窗锁定在特定的元素或位置。它适用于构建像下面这样的交互：

Snap 这个词我找不到合适的中文翻译，大家可以想像一下 iOS 时间选择组件，在滚动的时候会有咔嗒咔嗒的效果，滚动完成时会锁定元素，不会出现元素只显示一半的情况。

目前大多主流浏览器都支持 CSS Scroll Snap，如果想在较老的浏览器上支持它，就要使用一个 JS 插件：css-scroll-snap-polyfill。

CSS Scroll Snap 的基本用法就是在容器元素上设置 scroll-snap-type 属性，并在其子元素上设置 scroll-snap-align 属性。当滚动容器松开手后，容器会把视窗锁定在特定的位置。

我们来看一个简单的垂直滚动 Snap 示例。首先定义一个容器元素和几个它的子元素，结构如下：

然后我只需为容器元素设置 scroll-snap-type 属性，为子元素设置 scroll-snap-align 属性即可，如下：

scroll-snap-type: y mandatory 的意思是当滚动结束视窗会 snap 在 y 轴的一个点上。

scroll-snap-align: start 就是指定滚动结束时如何 snap 视窗的位置，这里的 start 就是指元素的起始位置。

为了示例的演示，我们再补充一些辅助 CSS，完整 CSS 代码如下：

完成的效果如下：

有了这个示例，现在你能实现像文章开头的横向滚动效果吗？