DigitalOcean 为您的旅程中的每个阶段提供云产品。 立即开始使用 $200 免费积分!
scroll-snap-type
属性是 CSS Scroll Snap 模块 的一部分。 滚动捕捉指的是在窗口(或可滚动容器)滚动时,将视窗的位置“锁定”到页面上的特定元素。 可以把它想象成在元素顶部放一个磁铁,它会粘在视窗的顶部,并强制页面停止滚动到那个位置。
如果您希望浏览器在页面的特定位置停止滚动,这将很有用。 例如:浏览照片库的用户可能不希望滚动到图像的一半位置 — 他们可能更希望在滚动时让图像“捕捉”到正确的位置。 滚动捕捉为开发人员提供了一种纯粹的 CSS 方式来处理这种行为。
scroll-snap-type
是您希望添加滚动捕捉的任何可滚动容器的必需属性。 它为滚动容器回答三个问题
- 容器是否使用滚动捕捉?
- 滚动捕捉应该应用于哪个轴 — x(水平)、y(垂直)、块或内联?
- 滚动捕捉应该如何表现? 是始终强制 100%,还是只有在用户“足够接近”捕捉位置时才会生效? 后面会详细介绍。
.scroll-container {
/* Always force (mandatory) scrolling to a snap point on the y-axis */
scroll-snap-type: y mandatory;
}
语法
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]
值
scroll-snap-type
接受以下值
none
禁用滚动捕捉。x
仅在 x 轴上启用滚动捕捉。y
仅在 y 轴上启用滚动捕捉。block
仅在块轴上启用滚动捕捉。inline
仅在内联轴上启用滚动捕捉。both
在两个轴上启用滚动捕捉(可以把它理解为x
*和*y
,或inline
*和*block
。mandatory
是一个严格性值,它告诉浏览器在没有滚动发生时 *始终* 转到捕捉位置。proximity
是一个严格性值,它告诉浏览器如果滚动操作 *非常接近* 捕捉位置,就转到捕捉位置。 如果它 *不是* *非常接近*,则浏览器不应该捕捉,滚动将正常进行。
示例
查看 CodePen 上的 scroll-snap-type 示例
,作者是 CSS-Tricks (@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 |