sroll-snap-type基本用法

sroll-snap-type基本用法

scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ] 定义滚动捕捉类型

mandatory: mandatory是强制性的，一般就强制，效果符合预期
proximity: 是接近、临近、大约，特殊场景使用，例如滚动元素大于容器，可尝试此属性查看效果

scroll-snap-align: start | center | end; 定义子元素对齐位置

scroll-snap-stop 定义了滚动容器是否可“越过”吸附位置

默认情况下，滚动捕捉只会在用户停止滚动时发生，这表示如果滚动过猛，中间可能会跳过几个捕捉点，然后才会停止。
可以通过给子元素设置 scroll-snap-stop: always 来改变这一行为。
这会将强制滚动容器在用户继续滚动之前停留在在就近的一个元素上。

scroll-padding 和 scroll-margin 滚动停留位置偏移

scroll-padding 作用于父元素
scroll-margin 作用于子元素

常用写法

定义两个就行，一个方向强制捕捉，一个停留位置。子元素可以是捕捉特定位置的子元素，例如第 3n+1 个

.container {
    scroll-snap-type: y mandatory;
}
.child {
    scroll-snap-align: center;
}

.container {
    scroll-snap-type: x mandatory;
}
.child:nth-child(3n+1) {
    scroll-snap-align: start;
}