CSS scroll-snap-align 属性
更多“自己尝试”的例子见下文。
定义和用法
scroll-snap-align 属性指定当用户停止滚动时，元素将聚焦在哪里。
要实现滚动捕捉行为，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| scroll-snap-align | 69.0 | 79.0 | 68.0 | 11.0 | 56.0 |
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 |
更多示例
图片库
scroll-snap-align 属性对于滚动图片库非常有用。在这里，滚动方向是水平的，捕捉对齐方式是中心。当用户释放滚动条时，最近的图片将捕捉到滚动区域的中间。尝试点击一张图片，然后使用左右箭头键滚动浏览它们。
#container > img {
scroll-snap-align: none center;
}
在块方向上，元素开始处对齐捕捉。
当垂直滚动时，scroll-snap-align 属性也可以设置为在块方向上，元素开始处对齐捕捉。
#container > div {
scroll-snap-align: start none;
}
相关页面
CSS scroll-snap-type 属性：CSS Scroll-snap-type 属性
