overscroll-behavior-x

语法

/* 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

邻近的滚动区域不会发生滚动链接，并且会阻止默认的滚动溢出行为。

正式定义

正式语法

overscroll-behavior-x = 
  contain  |
  none     |
  auto     

示例

防止底层元素水平滚动

在我们的 overscroll-behavior-x 示例（另请参阅源代码）中，我们有两个块级盒子，一个在另一个里面。外层盒子设置了很大的 width，以便页面可以水平滚动。内层盒子设置了较小的宽度（和 height），因此它可以舒适地放在视口内，但其内容被赋予了较大的 width，以便它可以水平滚动。

默认情况下，当内层盒子滚动并到达滚动边界时，整个页面将开始滚动，这可能不是我们想要的效果。为避免这种情况，你可以在内层盒子上设置 overscroll-behavior-x: contain。

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

规范

浏览器兼容性

另见

• overscroll-behavior
• overscroll-behavior-y
• overscroll-behavior-inline
• overscroll-behavior-block
• CSS overscroll behavior 模块