CSS overscroll-behavior-inline 属性

定义和用法

overscroll-behavior-inline 属性用于在行内方向上尝试滚动超出滚动边界时，关闭元素的滚动链或过度滚动反馈。

注意：要在行内方向上触发 overscroll-behavior，您可能需要在触摸板或触摸屏上使用滑动手势。

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

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

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

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

实例

例子 1

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

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

亲自试一试

例子 2：结合 writing-mode 属性

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

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

亲自试一试

CSS 语法

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

属性值

技术细节

浏览器支持

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

相关页面

参考：CSS overscroll-behavior 属性

参考：CSS overscroll-behavior-block 属性

参考：CSS overscroll-behavior-x 属性

参考：CSS overscroll-behavior-y 属性

参考：CSS scroll-behavior 属性

参考：CSS scroll-margin 属性

参考：CSS scroll-padding 属性

参考：CSS scroll-snap-align 属性

参考：CSS writing-mode 属性