overscroll-behavior-inline

Baseline 已广泛支持

此功能已成熟，并可在多种设备和浏览器版本上运行。自 2022 年 9 月起，所有浏览器都已支持此功能。

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 属性通过从以下值列表中选择一个关键字来指定。

值

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,
    transparent 0px,
    transparent 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,
    transparent 0px,
    transparent 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 Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者在 2025 年 8 月 9 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题