优化滚动的一个小技巧：scroll-snap-type

scroll-snap-type 优化滚动

CSS 新增了一批能够控制滚动的属性，让滚动能够在仅仅通过 CSS 的控制下，得到许多原本需要 JS 脚本介入才能实现的美好交互。

scroll-snap-type CSS 属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行。

语法

scroll-snap-type:none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

参数解析

none:当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点。
x:滚动容器只捕捉其水平轴上的捕捉位置。
y:滚动容器只捕捉其垂直轴上的捕捉位置。
block:滚动容器仅捕捉到其块轴上的捕捉位置。
inline:滚动容器仅捕捉到其内联轴上的捕捉位置。
both:同时捕捉两个轴线上的捕捉位置。
mandatory：如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
proximity ：如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

例子

举个例子，有个横向可滚动容器，希望每次滚动结束时，子块能够完整的展示，而不是被切割。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
ul {
    scroll-snap-type: x mandatory;
}
li {
    scroll-snap-align: center;
}

三个li可以在横轴容器内滚动。
scroll-snap-align属性为子元素相对于父容器的对其方式，可选值又 start|center|end 选择center可以使子元素居中等分展示到容器。

左侧为默认的滚动方式，右侧为增加了scroll-snap-type 属性的滚动。y轴上的滚动只需要修改下属性的x为y就可以实现。

scroll-snap-align :属性为子元素相对于父容器的对其方式

如上图展示，取值start时，则子元素对其父元素的方式对其起始位置，end则为对其结束位置，center为对其中间位置。
如果子元素大小不一，也能有非常好的表现，使用 scroll-snap-align: center，使得不规则子元素在每次滚动后居于容器中间：

浏览器支持情况

参考文章

https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type
https://github.com/chokcoco/iCSS/issues/74