overscroll-behavior-x

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-x 这个 CSS 属性用来控制当滚动到区域的水平边界时的浏览器行为。

备注:详细的解释请访问 overscroll-behavior

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

/* Global values */
overflow: inherit;
overflow: initial;
overflow: unset;
初始值auto
适用元素non-replaced block-level elements and non-replaced inline-block elements
是否是继承属性
计算值as specified
动画类型离散值

语法

overscroll-behavior-x 属性可以选用下列值。

auto

默认的滚动溢出行为表现的和正常一样。

contain

默认的滚动溢出行为将被内部的元素观察到,(例如:“bounce”效果或者刷新),但是相邻的区域不会产生连续滚动效果,例如:在下面的元素不会被滚动。

none

相邻的滚动区域不会有连续滚动效果,并且默认的滚动溢出行为会被阻止。

正式语法

overscroll-behavior-x = 
contain |
none |
auto

示例

在这个简单的例子中 (源代码), 有两个块级别的盒子,一个在另一个的里面。外部的盒子设置有一个大的 width 所以整个页面会水平滚动。内部的盒子设置有一个小的宽度 (和 height) 所以他位于观察点内合适的地方,但是他的内容被设置了一个大的 width, 所以它会水平的滚动。

默认情况下,当内部的盒子被滚动达到边界的时候,整个页面将开始滚动,这个行为有可能不是我们期望的。为了避便这个行为,你可以设置 overscroll-behavior-x: contain 在里面的盒子上:

css
main > div {
  height: 300px;
  width: 500px;
  overflow: auto;
  position: relative;
  top: 100px;
  left: 100px;
  overscroll-behavior-x: contain;
}

规范

Specification
CSS Overscroll Behavior Module Level 1
# overscroll-behavior-longhands-physical

浏览器兼容性

BCD tables only load in the browser

See also