CSS scroll-snap-stop 属性

定义和用法

当在触控板或触摸屏上快速滑动时,scroll-snap-stop 属性用于指定滚动是直接跳过元素,还是停止并吸附到下一个元素。

要控制滚动吸附停止行为,必须在子元素上设置 scroll-snap-stopscroll-snap-align 属性,同时在父元素上设置 scroll-snap-type 属性。

注意:你需要在带有触控板或触摸屏的设备上使用滑动手势,才能体验 scroll-snap-stop 属性的效果。

实例

在触控板或触摸屏上快速滑动时,强制滚动停止并吸附到下一个元素,而不是直接跳过元素:

div {
  scroll-snap-stop: always;
}

亲自试一试

CSS 语法

scroll-snap-stop: normal|always|initial|inherit;

属性值

描述
normal 默认值。在触控板或触摸屏上快速滑动后,滚动会缓慢减速并跳过多个元素。
always 在触控板或触摸屏上快速滑动后,滚动会停止并将下一个元素吸附到焦点位置。
initial 将此属性设置为其默认值。参阅 initial
inherit 从其父元素继承此属性。参阅 inherit

技术细节

默认值: normal
继承性:
动画制作: 不支持。请参阅:动画相关属性
版本: CSS3
JavaScript 语法: object.style.scrollSnapStop="always"

浏览器支持

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

Chrome Edge Firefox Safari Opera
75.0 79.0 103.0 15.0 62.0

相关页面

参考:CSS scroll-snap-align 属性

参考:CSS scroll-snap-type 属性