Scroll Snap

一种类似于刷抖音方式的滚动贴合交互，可以呈现上下滚动贴合，或是左右滚动贴合。

MDN文档

scroll-snap-type

这个属性设置给父容器，接收两个参数，第一个参数是滚动方向（x/y轴），第二个参数是滚动方式mandatory、proximity

scroll-snap-align

这个属性是设置给子容器的，主要用于设置滚动切换到的当前容器处于父容器哪个位置，顶部或是中间或是其他位置。

示例一

点击查看【codepen】

示例二：

点击查看【codepen】
剩下的可自行根据文档，按照自己的需求调整。

注意: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。