CSS------scroll-snap滚动捕捉的一些属性

scroll-snap-type

定义在滚动容器中的一个临时点(snap point)如何被严格的执行

x mandatory

x: 滚动容器只捕捉其水平轴上的捕捉位置。

mandatory: 如果它当前没有被滚动,这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束,如果可能,它会临时在那个点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。

y proximity

y: 滚动容器只捕捉其垂直轴上的捕捉位置.

proximity:如果它当前没有被滚动,这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小,滚动偏移将被调整为保持静止在临时点上。

both mandatory

scroll-snap-align

start

此框的滚动捕捉区域的开始对齐,在滚动容器的捕捉端口内是该轴上的捕捉位置

end

此框的滚动捕捉区域在滚动容器的捕捉端口内的末端对齐是该轴上的捕捉位置

center

此框的滚动捕捉区域的中心对齐,在滚动容器的捕捉端口内是该轴上的捕捉位置

scroll-snap-stop

是否允许滚动容器“越过”可能的捕捉位置

normal

always

scroll-snap-type 用在父元素上

scroll-snap-align scroll-snap-stop 用在子元素上

猜你喜欢

转载自blog.csdn.net/m0_63300737/article/details/125588010