【学习笔记】【css】磁吸效果scroll-snap

属性说明

1.scroll-snap-type

scroll-snap-type	放置父级容器
none	默认值，当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点
x	规定了方向，即滚动容器只捕捉其水平轴上的捕捉位置
y	规定了，即滚动容器只捕捉其水平轴上的捕捉位置
block	滚动容器仅捕捉到其块轴上的捕捉位置
inline	滚动容器仅捕捉到其内联轴上的捕捉位置
both	滚动容器x,y的滚动都会被捕获
mandatory	滚动结束时判定，强制到达捕获点
proximity	滚动结束时判定，贴合临近的捕获点

2.mandatory & proximity

mandatory ：通常会跟随x、y、both使用
(如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上，也就是说， 用户轻轻滑动一次， 即可实现使得整个临时点被切换，从而实现整屏滑动)
proximity ：通常也会跟随x、y、both使用
（如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上）

3.scroll-snap-align

scroll-snap-align	放置子元素
none	该方框没有在该轴上定义一个对齐位置
start	这个盒子的滚动snap区域的开始对齐
end	这个盒子的滚动snap区域的结尾对齐
center	这个盒子的滚动snap区域的中心对齐

4.一点补充

测试过之后，如果需要一屏贴合效果，需要增加如下设置

width: 100vw;
height: 100vh;

增加了有一屏贴合，否则……效果不怎么明显，甚至有时用户用力过猛也会连翻数屏，这时就需要其他属性的设置了。

5.scroll-snap-stop

scroll-snap-stop	放置父级容器
normal	默认值。可以忽略捕获位置。
always	不能忽略捕获位置。且必须定位到第一个捕获元素的位置。

这个属性说人话就是：不能用力过猛翻过头了，只能一屏一屏翻。
但效果就很难说，有些浏览器没效果，需要自己测试一下。

6.根据实际情况可能还需要

	overflow: hidden;
	overflow-y: scroll;

7.示例代码

HTML:

<div class="snap-father">
	这是父级容器
		<p class="snap-child">
			这是子元素
		</p>
</div>

CSS

.snap-father{
	width: 100vw;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow: hidden;
	overflow-y: scroll;
}
.snap-child{
	width: 100%;
	height: calc(100%);
	scroll-snap-align: start;
}