CSS scroll-snap-type 属性
更多“自己尝试”的例子见下文。
定义和用法
scroll-snap-type 属性指定了停止滚动时元素将如何聚焦，以及聚焦的方向。
要实现滚动捕捉行为，必须在父元素上设置 scroll-snap-type 属性，并在子元素上设置 scroll-snap-align 属性。
| 默认值 | none |
|---|---|
| 继承 | no |
| 可动画 | 否。 阅读关于可动画属性 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.scrollSnapType="x mandatory" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| scroll-snap-type | 69.0 | 79.0 | 99.0 | 11.0 | 56.0 |
CSS 语法
scroll-snap-type: none|x|y|block|inline|both|mandatory|proximity|initial|inherit;
属性值
| 值 | 描述 |
|---|---|
| none | 无滚动捕捉效果。这是默认值 |
| x | 滚动捕捉效果设置在 x 轴上 |
| y | 滚动捕捉效果设置在 y 轴上 |
| block | 滚动捕捉效果设置在块状方向 |
| inline | 滚动捕捉效果设置在行内方向 |
| both | 滚动捕捉效果同时设置在 x 轴和 y 轴上 |
| mandatory (强制) | 滚动操作完成后，滚动会自动移动到捕捉点。 |
| proximity (邻近) | 与 mandatory 类似，但没有那么严格。滚动操作完成后，滚动会自动移动到捕捉点，但在捕捉点之间有一个没有捕捉效果的区域。这取决于浏览器参数。 |
| initial | 将此属性设置为其默认值。阅读关于initial |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
双向滚动捕捉
scroll-snap-type 属性同时设置在 x 轴和 y 轴上。
#container > div {
scroll-snap-type: both mandatory;
}
带有 proximity 的滚动捕捉
scroll-snap-type 属性同时设置在 x 轴和 y 轴上，并具有 proximity 行为。使用此属性值，如果滚动操作在两个元素中间停止，则不会进行捕捉。
#container > div {
scroll-snap-type: both proximity;
}
相关页面
CSS scroll-snap-align 属性：CSS Scroll-snap-align 属性
