CSS scroll-snap-align 属性
定义和用法
scroll-snap-align 属性指定了当您停止滚动时，元素将吸附到焦点的位置。
要实现滚动吸附行为，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。
实例
例子 1
当用户停止滚动时，使最近的元素吸附到中心位置：
div {
scroll-snap-align: center;
}
例子 2：图片库
scroll-snap-align 属性非常适合用于滚动浏览图片库。在这里，滚动方向是水平的，吸附对齐方式是居中。当用户松开滚动条时，最近的图片将吸附到可滚动区域的中间位置。尝试点击一张图片，然后使用左右箭头键滚动浏览它们：
#container > img {
scroll-snap-align: none center;
}
例子 3：在块方向上垂直对齐吸附位置
当垂直滚动时，scroll-snap-align 属性也可以在块方向上设置为元素的起始位置：
#container > div {
scroll-snap-align: start none;
}
CSS 语法
scroll-snap-align: none|start|end|center|block inline|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 无滚动吸附效果。默认值。 |
| start | 在 x 轴和 y 轴上，元素开始处进行滚动吸附。 |
| end | 在 x 轴和 y 轴上，元素结束处进行滚动吸附。 |
| center | 在 x 轴和 y 轴上，元素中心处进行滚动吸附。 |
| block inline | 双值语法。第一个值指定块级方向上的吸附方式，第二个值指定行内方向上的吸附方式。 |
| initial | 将此属性设置为其默认值。参阅 initial。 |
| inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
| 默认值： | none |
|---|---|
| 继承性： | 否 |
| 动画制作： | 不支持。请参阅：动画相关属性。 |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.scrollSnapAlign="start" |
浏览器支持
表格中的数字表示首个完全支持该属性的浏览器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |