CSS scroll-snap-align 属性
下面还有更多“亲自试一试”的示例。
定义和用法
The scroll-snap-align 属性指定当您停止滚动时，元素将捕捉到哪个焦点位置。
要实现滚动捕捉行为，必须在子元素上设置 scroll-snap-align 属性，并在父元素上设置 scroll-snap-type 属性。
| 默认值 | none |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 阅读关于 可动画 的内容 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.scrollSnapAlign="start" 试一试 |
浏览器支持
表格中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| 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 的内容 |
更多示例
图片库
The scroll-snap-align 属性非常适合用于滚动浏览图片库。在此，滚动方向为水平方向，捕捉对齐方式为居中。当用户松开滚动条时，最近的图片将捕捉到可滚动区域的中间位置。尝试点击一张图片，然后使用左右箭头键滚动浏览它们
#container > img {
scroll-snap-align: none center;
}
垂直对齐元素的起始位置进行捕捉
The scroll-snap-align 属性也可以在垂直滚动时，设置元素在块方向上的起始位置进行捕捉
#container > div {
scroll-snap-align: start none;
}
相关页面
CSS scroll-snap-type 属性： CSS Scroll-snap-type 属性
