CSS overscroll-behavior-block 属性

定义和用法

overscroll-behavior-block 属性用于在尝试在块方向滚动超出滚动边界时，关闭元素上的滚动链（scroll chaining）或过度滚动反馈（overscroll affordance）。

滚动链是指在一个元素上过度滚动会导致父元素的滚动行为。这是默认行为。

过度滚动反馈是当用户尝试滚动超出滚动边界时给予的反馈。例如，在移动设备上，当尝试滚动超出页面顶部时，通常会伴随着页面刷新的视觉反馈。

CSS 的 overscroll-behavior-block 和 overscroll-behavior-inline 属性与 overscroll-behavior-x 和 overscroll-behavior-y 属性非常相似，但 overscroll-behavior-block 和 overscroll-behavior-inline 属性依赖于块方向和行内方向。

注意：相关的 CSS 属性 writing-mode 定义了块方向。这会影响块方向是在 x 方向还是 y 方向，以及 overscroll-behavior-block 属性的结果。对于英文页面，块方向是向下的，行内方向是从左到右的。

实例

例子 1

在块方向上关闭可滚动的 <div> 元素的滚动链：

#yellowDiv {
  overscroll-behavior-block: contain;
}

亲自试一试

例子 2：结合 writing-mode 属性

将 <div> 元素的 writing-mode 属性值设置为 'vertical-rl' 时，块方向变为 x 方向，因此 overscroll-behavior-block 现在在 x 方向上起作用，而不是 y 方向：

#yellowDiv {
  writing-mode: vertical-rl;
  overscroll-behavior-block: contain;
}

亲自试一试

CSS 语法

overscroll-behavior-block: auto|contain|none|initial|inherit;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

参考：CSS overscroll-behavior 属性

参考：CSS overscroll-behavior-inline 属性

参考：CSS overscroll-behavior-x 属性

参考：CSS overscroll-behavior-y 属性

参考：CSS scroll-behavior 属性

参考：CSS scroll-margin 属性

参考：CSS scroll-padding 属性

参考：CSS scroll-snap-align 属性

参考：CSS writing-mode 属性