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,其中包含更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
69 | 68 | 11* | 79 | 11 |
移动设备/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 11.0-11.2 |
请注意,Chrome 可能不支持 scroll-snap-stop: always;
。