overscroll-behavior

Avatar of Mojtaba Seyedi
Mojtaba Seyedi

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

overscroll-behavior CSS 属性控制元素是否使用“滚动链”。您可能之前已经体验过这种行为,并且可能认为网络上的滚动就是这样工作的!如果您在具有自身滚动功能的元素(例如垂直滚动)中,并且您已滚动到底部,那么默认情况下,上面的下一个父元素(可能是页面本身)将开始沿该方向滚动。如果您不希望这种默认行为,overscroll-behavior 就是控制它的属性。

换句话说,它指定浏览器在到达滚动区域边界时的行为。

.stop-scroll-chaining {
  overscroll-behavior: contain; /* or "none" */
}

overscroll-behavioroverscroll-behavior-xoverscroll-behavior-y 的简写,它在 CSS 滚动溢出行为模块级别 1 规范 中定义,该规范目前处于编辑草案阶段。

滚动链和滚动溢出提示

滚动链 是滚动从一个滚动容器传播到祖先滚动容器的情况。您可以在下面的视频中看到这种效果

如您所见,一旦列表框的滚动边界被触及,它背后的容器就会开始滚动,然后底层的页面也随着滚动链滚动。

滚动溢出提示 就像 Android 上的滚动溢出发光效果iOS 上的橡皮筋效果,它们都充当用户已触及滚动边界的视觉指示器。您可能还会在其他地方看到其他实现,例如移动浏览器上的“弹跳”效果或在页面顶部或底部触及时刷新页面。

语法

overscroll-behavior: [ contain | none | auto ]{1,2}
  • 初始值:auto
  • 应用于:非替换块级元素和非替换内联块元素
  • 继承:
  • 百分比:n/a
  • 计算值:作为简写形式的每个属性
  • 动画类型:离散

/* Keyword values */
overscroll-behavior: auto; /* default */
overscroll-behavior: contain;
overscroll-behavior: none;

/* Two values */
overscroll-behavior: none auto;
overscroll-behavior: auto contain;

/* Global values */
overscroll-behavior: inherit;
overscroll-behavior: initial;
overscroll-behavior: revert;
overscroll-behavior: unset;
  • auto:默认值。指定浏览器应执行默认边界操作,并使用户在到达主滚动区域边界时能够继续滚动父滚动区域。换句话说,它允许滚动链和滚动溢出提示。
  • contain:阻止滚动链。滚动不会传播到祖先(父容器中的其他元素),但会保留滚动溢出提示,例如在支持它的操作系统中滚动到容器末尾时的“弹跳”效果。
  • none:阻止滚动链,也阻止滚动溢出提示。因此,您将无法获得 Android 滚动溢出发光效果或 iOS 橡皮筋效果。
  • initial:应用属性的默认设置,即 auto
  • inherit:采用父元素的 overscroll-behavior 值。
  • unset:从元素中移除当前的 overscroll-behavior

组成属性

我们之前提到过,overscroll-behavior 是另外两个 CSS 属性的简写形式,我们称它们为简写的“组成属性”。让我们分别看一下这些属性。

overscroll-behavior-x

顾名思义,overscroll-behavior-x CSS 属性允许您控制浏览器在到达滚动区域的水平边界时的行为。因此,我们可以使用 overscroll-behavior 独自控制水平和垂直滚动溢出行为,而 overscroll-behavior-x 只控制左右方向的行为。

在下面的演示中,您可以看到浏览器在 overscroll-behavior-x 的值为 contain 时的不同行为

看到了吗?当关闭 contain 滚动溢出行为时,一旦您到达水平(左右)滚动边界,整个页面就会开始滚动。

overscroll-behavior-y

overscroll-behavior-y CSS 属性与 overscroll-behavior-x 相似,但它控制浏览器在到达滚动区域的垂直边界时的行为。因此,我们这次谈论的是上下方向。

.modal {
  overscroll-behavior-y: contain;
}

overscroll-behavior-inline

overscroll-behavior-inline CSS 属性允许您控制浏览器在到达滚动区域的内联方向边界时的行为。

overscroll-behavior-inline 是一个 CSS 逻辑属性,当 writing-mode 为水平时,它对应于元素的 overscroll-behavior-x,当 writing-mode 为垂直时,它对应于元素的 overscroll-behavior-y

overscroll-behavior-block

overscroll-behavior-block CSS 属性允许您控制浏览器在到达滚动区域的块方向边界时的行为。

overscroll-behavior-block 是一个 CSS 逻辑属性,当 writing-mode 为水平时,它对应于元素的 overscroll-behavior-y,当 writing-mode 为垂直时,它对应于元素的 overscroll-behavior-x

.element {
  overscroll-behavior-block: none;
}

用法

想看看 overscroll-behavior 在实际中的几个例子吗?当然!

禁用下拉刷新功能

自从下拉刷新效果变得非常流行后,移动浏览器,包括 Android 上的 Chrome,也实现了它。在页面顶部向下滑动会刷新整个页面。

来源:Chrome 开发者

虽然这个手势非常有用,但有时你可能想创建自己的下拉刷新效果,并且需要禁用浏览器的原生滚动溢出操作。我们可以通过阻止 <html><body> 上的滚动链接来实现。

html {
  overscroll-behavior-y: contain;
}

这也会阻止滚动溢出导航操作。

来源:Chrome 开发者

禁用滚动溢出光晕和橡皮筋效果

设置 contain 值不会移除这些效果。为了使其生效,我们需要使用 none 值,这也会禁用下拉刷新和滚动溢出导航操作。

html {
  overscroll-behavior-y: none;
}

你可能还想将它与无限滚动一起使用。当用户到达页面底部,得到橡皮筋效果,然后加载更多内容时,可能会令人困惑。

阻止页面内容在模态框或固定侧边栏导航下方滚动

考虑一个侧边栏导航,其中包含大量的项目,数量之多以至于导航的高度超过页面高度,用户必须向下滚动才能看到所有菜单项。

当用户到达底部时,溢出容器会停止滚动,但如果用户继续滚动,导航容器之外的其他内容也会开始滚动。

使用 contain 关键字可以防止这种情况。

我们可以对模态框使用相同的方法。

浏览器支持

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

桌面

ChromeFirefoxIEEdgeSafari
6559117916.0

移动/平板

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712716.0

更多信息