scroll-snap-stop

Avatar of Andy Adams
Andy Adams on

DigitalOcean 提供适用于您旅程各个阶段的云产品。 立即开始使用 价值 200 美元的免费积分!

scroll-snap-stop 是 CSS 滚动捕捉模块的一部分。 滚动捕捉是指当窗口(或可滚动容器)滚动时,“锁定”视窗的位置到页面上的特定元素。 可以将滚动捕捉容器想象成在元素顶部放置一个磁铁,该磁铁会粘附在视窗顶部并迫使页面在该处停止滚动。

scroll-snap-stop 是滚动捕捉容器内滚动捕捉元素的可选属性。 有关滚动捕捉容器的更多信息,请参阅 scroll-snap-type 年鉴条目

scroll-snap-stop 允许您强制滚动捕捉容器捕捉到特定元素。 假设您在滚动捕捉容器内滚动,并且您用力地转动鼠标滚轮。 通常情况下,浏览器会让滚动速度飞过捕捉点,直到它停留在滚动通常结束位置附近的捕捉点上。 通过设置 scroll-snap-stop,您可以告诉浏览器它必须在允许用户通过之前停止在特定元素上。

/* Assuming this element is a child of a container with `scroll-snap-type` set */
.element {
  scroll-snap-stop: always;
}

语法

scroll-snap-stop: normal | always;

scroll-snap-stop 接受以下值

  • normal 是默认值,允许滚动元素在不捕捉的情况下滚动过去
  • always 将强制浏览器捕捉到此元素,即使滚动通常会滚动到此元素之外

示例

查看 CodePen 上 CSS-Tricks 的 scroll-snap-stop 示例
(@css-tricks) 。

浏览器支持

此浏览器支持数据来自 Caniuse,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
696811*7911

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.0-11.2

请注意,Chrome 可能不支持 scroll-snap-stop: always;

相关

资源