overscroll-behavior-inline

**overscroll-behavior-inline** CSS 属性设置浏览器在到达滚动区域的内联方向边界时的行为。

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

语法

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

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

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

Values

auto

默认滚动溢出行为按正常情况发生。

contain

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

none

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

正式定义

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

正式语法

overscroll-behavior-inline = 
  contain  |
  none     |
  auto

示例

阻止内联溢出

在本演示中，我们有两个块级框，一个在另一个内部。外框设置了一个很大的 width，因此页面将水平滚动。内框设置了一个小的宽度（和 height），因此它舒适地位于视窗内，但它的内容设置了一个很大的宽度，因此它也将水平滚动。

默认情况下，当内部框滚动并到达滚动边界时，整个页面将开始滚动，这可能不是我们想要的。为了避免这种情况在内联方向发生，我们在内部框上设置了overscroll-behavior-inline: contain。

HTML

html
<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-inline</code> has been used to make it so that
        when the scroll boundaries of the yellow inner box are reached, the
        whole page does not begin to scroll.
      </p>
    </div>
  </div>
</main>

CSS

css
main {
  height: 400px;
  width: 3000px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

main > div {
  height: 300px;
  width: 400px;
  overflow: auto;
  position: relative;
  top: 50px;
  left: 50px;
  overscroll-behavior-inline: contain;
}

div > div {
  height: 100%;
  width: 1500px;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to right,
    rgb(0 0 0 / 0%) 0px,
    rgb(0 0 0 / 0%) 19px,
    rgb(0 0 0 / 50%) 20px
  );
}

p {
  padding: 10px;
  background-color: rgb(255 0 0 / 50%);
  margin: 0;
  width: 360px;
  position: relative;
  top: 10px;
  left: 10px;
}

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

参见