overscroll-behavior-x

**overscroll-behavior-x** CSS 属性设置浏览器在到达滚动区域的水平边界时的行为。

有关完整解释，请参阅 overscroll-behavior。

语法

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

/* Global values */
overscroll-behavior-x: inherit;
overscroll-behavior-x: initial;
overscroll-behavior-x: revert;
overscroll-behavior-x: revert-layer;
overscroll-behavior-x: unset;

overscroll-behavior-x 属性指定为从以下值列表中选择的关键字。

值

auto

默认滚动溢出行为按正常进行。

contain

在设置此值的元素内观察到默认滚动溢出行为（例如，“反弹”效果）。但是，在相邻滚动区域上不会发生任何 滚动链接；底层元素不会滚动。contain 值会禁用本机浏览器导航，包括垂直下拉刷新手势和水平滑动导航。

none

不会发生滚动链接到相邻滚动区域，并且默认滚动溢出行为将被阻止。

正式定义

初始值auto
应用于非替换块级元素和非替换内联块级元素
继承否
计算值如指定
动画类型离散

正式语法

overscroll-behavior-x = 
  contain  |
  none     |
  auto

示例

防止底层元素水平滚动

在我们简单的 overscroll-behavior-x 示例（另请参阅 源代码）中，我们有两个块级盒子，一个在另一个里面。外盒有一个大的 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;
}

规范

规范
CSS 滚动溢出行为模块级别 1
# overscroll-behavior-longhands-physical

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅