CSS scroll-snap-type 属性

定义和用法

scroll-snap-type 属性指定了当您停止滚动时，元素将如何吸附到焦点以及吸附的方向。

要实现滚动吸附行为，必须在父元素上设置 scroll-snap-type 属性，并在子元素上设置 scroll-snap-align 属性。

实例

例子 1

在 x 轴上设置滚动吸附功能：

#container {
  scroll-snap-type: x mandatory;
}

亲自试一试

例子 2：在 x 轴和 y 轴上设置吸附行为

在 x 轴和 y 轴上均设置 scroll-snap-type 属性：

#container > div {
  scroll-snap-type: both mandatory;
}





亲自试一试

例子 3：带有邻近性的吸附行为

在 x 轴和 y 轴上设置带有邻近性行为的 scroll-snap-type 属性。使用此属性值时，如果滚动操作正好停止在两个元素的中间位置，则不会进行吸附：

#container > div {
  scroll-snap-type: both proximity;
}





亲自试一试

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。

技术细节

默认值： none
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.scrollSnapType="x mandatory"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
69.0 79.0 99.0 11.0 56.0

相关页面

参考：CSS scroll-snap-align 属性