overscroll-behavior-block

Baseline 已广泛支持

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

overscroll-behavior-block CSS 属性设置了当滚动区域的块方向边界到达时，浏览器的行为。

有关完整说明，请参阅 overscroll-behavior。

语法

css

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

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

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

值

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

正式定义

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

正式语法

overscroll-behavior-block = 
  contain  |
  none     |
  auto

示例

阻止块方向的滚动回弹

在此演示中，我们有两个块级盒子，一个在另一个内部。外部盒子设置了较大的 height，因此页面将垂直滚动。内部盒子设置了较小的 width（和 height），因此它可以舒适地放置在视口内部，但其内容设置了较大的 height，因此它也将垂直滚动。

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

HTML

html

<main>
  <div>
    <div>
      <p>
        <code>overscroll-behavior-block</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: 3000px;
  width: 500px;
  background-color: white;
  background-image: repeating-linear-gradient(
    to bottom,
    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-block: contain;
}

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

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

结果

规范

规范
CSS Overscroll Behavior Module Level 1 # overscroll-behavior-longhands-logical

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

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

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