DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 价值 200 美元的免费积分!
overscroll-behavior
CSS 属性控制元素是否使用“滚动链”。您可能之前已经体验过这种行为,并且可能认为网络上的滚动就是这样工作的!如果您在具有自身滚动功能的元素(例如垂直滚动)中,并且您已滚动到底部,那么默认情况下,上面的下一个父元素(可能是页面本身)将开始沿该方向滚动。如果您不希望这种默认行为,overscroll-behavior
就是控制它的属性。
换句话说,它指定浏览器在到达滚动区域边界时的行为。
.stop-scroll-chaining {
overscroll-behavior: contain; /* or "none" */
}
overscroll-behavior
是 overscroll-behavior-x
和 overscroll-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,也实现了它。在页面顶部向下滑动会刷新整个页面。
虽然这个手势非常有用,但有时你可能想创建自己的下拉刷新效果,并且需要禁用浏览器的原生滚动溢出操作。我们可以通过阻止 <html>
或 <body>
上的滚动链接来实现。
html {
overscroll-behavior-y: contain;
}
这也会阻止滚动溢出导航操作。
禁用滚动溢出光晕和橡皮筋效果
设置 contain
值不会移除这些效果。为了使其生效,我们需要使用 none
值,这也会禁用下拉刷新和滚动溢出导航操作。
html {
overscroll-behavior-y: none;
}
你可能还想将它与无限滚动一起使用。当用户到达页面底部,得到橡皮筋效果,然后加载更多内容时,可能会令人困惑。
阻止页面内容在模态框或固定侧边栏导航下方滚动
考虑一个侧边栏导航,其中包含大量的项目,数量之多以至于导航的高度超过页面高度,用户必须向下滚动才能看到所有菜单项。
当用户到达底部时,溢出容器会停止滚动,但如果用户继续滚动,导航容器之外的其他内容也会开始滚动。
使用 contain
关键字可以防止这种情况。
我们可以对模态框使用相同的方法。
浏览器支持
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
65 | 59 | 11 | 79 | 16.0 |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 16.0 |
我刚刚了解了这个 CSS 属性。完全改变游戏规则!我觉得这将创造一种更加自然的用户体验。
我正在寻找一个停止橡皮筋效应但保留滚动链的解决方案。有人知道解决方案吗?
太棒了,直到你试图在 iOS 上阻止它……有人找到解决方法吗?
这个属性有 polyfill 吗?显然,苹果并不专注于实施新的 Web API 和 CSS 属性。在我看来,polyfill 以最自然的方式解决了他们的无知问题。