目录

CSS scroll-snap-type 属性

❮上一节完整的CSS参考下一节❯

示例

在 x 轴上设置滚动捕捉功能。

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

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个scroll-snap-type指定当您停止滚动时元素如何捕捉焦点以及沿哪个方向。

为了实现滚动捕捉行为，scroll-snap-type属性必须设置在父元素上，并且scroll-snap-align必须在子元素上设置属性。

默认值：	没有任何
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.scrollSnapType="x mandatory"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
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;

属性值

Value	Description
none	No scroll snap effect. This is default
x	Scroll snap effect is set on x-axis
y	Scroll snap effect is set on y-axis
block	Scroll snap effect is set on block direction
inline	Scroll snap effect is set on inline direction
both	Scroll snap effect is set on both x- and y-axis
mandatory	Scroll will automatically move to snap point after scroll action is finished
proximity	Similar to mandatory, but not as strict. Scroll will automatically move to snap point after scroll action is finished, but inbetween snap points there is an area without the snap effect. Depends on browser parameters.
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

两个方向的捕捉行为

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

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

亲自试一试 »

接近时捕捉行为

这个scroll-snap-type属性在 x 轴和 y 轴上都设置为接近行为。使用此属性值，如果滚动操作恰好停止在两个元素的中间，则不会出现捕捉：

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

亲自试一试 »

相关页面

CSS 滚动对齐属性：CSS 滚动对齐属性

❮上一节完整的CSS参考下一节❯