overscroll-behavior-block

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,
    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-block: contain;
}

div > div {
  height: 1500px;
  width: 100%;
  background-color: yellow;
  background-image: repeating-linear-gradient(
    to bottom,
    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: 340px;
  position: relative;
  top: 10px;
  left: 10px;
}

结果

规范

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

浏览器兼容性

BCD 表仅在浏览器中加载

另请参阅