CSS scroll-snap-type 属性
下面还有更多“亲自试一试”的示例。
定义和用法
The scroll-snap-type 指定当您停止滚动时元素如何捕捉到焦点，以及捕捉的方向。
为了实现滚动捕捉行为，必须在父元素上设置 scroll-snap-type 属性，并且必须在子元素上设置 scroll-snap-align 属性。
| 默认值 | none |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 阅读关于 可动画 的内容 |
| 版本 | 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 的内容 |
更多示例
双向捕捉行为
The scroll-snap-type 属性在 x 轴和 y 轴上都设置。
#container > div {
scroll-snap-type: both mandatory;
}
具有邻近性的捕捉行为
The scroll-snap-type 属性在 x 轴和 y 轴上都设置，并具有邻近性行为。使用此属性值，如果滚动操作停止在两个元素的正中间，则没有捕捉。
#container > div {
scroll-snap-type: both proximity;
}
相关页面
CSS scroll-snap-align 属性： CSS Scroll-snap-align 属性
