overscroll-behavior

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

overscroll-behavior CSS 属性是 overscroll-behavior-xoverscroll-behavior-y 属性的合并写法,让你可以控制浏览器过度滚动时的表现——也就是滚动到边界。

css
/* 关键字的值 */
overscroll-behavior: auto; /* 默认 */
overscroll-behavior: contain;
overscroll-behavior: none;

/* 使用 2 个值 */
overscroll-behavior: auto contain;

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;

默认情况下,当触及页面顶部或者底部时(或者是其他可滚动区域),移动端浏览器倾向于提供一种“触底”效果,甚至进行页面刷新。你可能也发现了,当对话框中含有可滚动内容时,一旦滚动至对话框的边界,对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

在某些情况下我们不想要这些表现,使用 overscroll-behavior 来去除不需要的滚动链,以及类似 QQ 一类的应用下拉刷新效果。

初始值auto
适用元素non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
计算值该简写所对应的每个属性:
动画类型离散值

语法

overscroll-behavior 属性可以使用下面列表中的一或两个关键字指定。

使用两个关键字来指定 overscroll-behavior 分别在 xy 轴的值。只用一个值的话,x 和 y 轴都被指定为该值。

auto

默认效果

contain

设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但是临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动。

none

临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止。

形式语法

overscroll-behavior = 
[ contain | none | auto ]{1,2}

示例

在我们 滚动行为示例 (也可以看该 源代码) 我们展现一个虚构的联系人全页列表,和一个包含聊天窗口的对话框。

正常情况下在聊天窗口边界之前都可以使用滚动条,但是当滚动到边界之后,其后的联系人窗口也将开始滚动,这并不是我们满意的效果。可以在聊天窗口中使用 overscroll-behavior-y (overscroll-behavior 也可以) 就像如下:

css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}

我们也希望移除标准的滚动至顶部或底部的滚动特效(例如 Android 上的 Chrome 当滚动超过顶部边界时会刷新页面),可以通过在 <body> 元素设置 overscroll-behavior: none 来阻止这个行为:

css
body {
  margin: 0;
  overscroll-behavior: none;
}

规范

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-properties

在 CSSWG 发布自己的草案之前,该规范只能在它的 WICG Github Repository 中找到。

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
overscroll-behavior
auto
contain
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

参见