CSS代码实现滚动贴合效果

贴合效果"/>

CSS代码实现滚动贴合效果

大部分人基本上都会使用JS实现页面的滚动贴合效果，在学习的过程中，偶然发现原生CSS实现滚动贴合效果的方法，故分享。

垂直滚动贴合相关代码：

 核心代码：

scroll-snap-type：y mandatory

scroll-snap-align:start

y轴为纵向滚动贴合，mandatory为强制滚动，用户只要滚动滚动条，就能够自动滚动贴合到内元素的顶部。

将y改为x，也可以进行水平方向的滚动贴合。

将mandatory改成proximity，可以让元素离贴合点小于一定距离才会自动贴合。该距离会根据浏览器自动规定。

步骤一共分为两步：

1.给滚动容器设置scroll-snap-type，第一个值为方向，可以取x或者y，第二个值为方式。

2.给子元素设置scroll-snap-align，还可以给容器设置scroll-padding，让贴合点和容器有一定的间距。