scroll-snap-type

Avatar of Andy Adams
Andy Adams

DigitalOcean 为您的旅程中的每个阶段提供云产品。 立即开始使用 $200 免费积分!

scroll-snap-type 属性是 CSS Scroll Snap 模块 的一部分。 滚动捕捉指的是在窗口(或可滚动容器)滚动时,将视窗的位置“锁定”到页面上的特定元素。 可以把它想象成在元素顶部放一个磁铁,它会粘在视窗的顶部,并强制页面停止滚动到那个位置。

如果您希望浏览器在页面的特定位置停止滚动,这将很有用。 例如:浏览照片库的用户可能不希望滚动到图像的一半位置 — 他们可能更希望在滚动时让图像“捕捉”到正确的位置。 滚动捕捉为开发人员提供了一种纯粹的 CSS 方式来处理这种行为。

scroll-snap-type 是您希望添加滚动捕捉的任何可滚动容器的必需属性。 它为滚动容器回答三个问题

  1. 容器是否使用滚动捕捉?
  2. 滚动捕捉应该应用于哪个轴 — x(水平)、y(垂直)、块或内联?
  3. 滚动捕捉应该如何表现? 是始终强制 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,其中有更多详细信息。 数字表示浏览器在该版本及更高版本中支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
696811*7911

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712711.0-11.2

相关

资源