Thuộc tính overscroll-behavior-inline CSS

Định nghĩa và cách sử dụng

overscroll-behavior-inline Thuộc tính này được sử dụng để tắt chuỗi cuộn của phần tử hoặc phản hồi cuộn quá mức khi cố gắng cuộn ra ngoài giới hạn cuộn theo hướng hàng.

注意：Để kích hoạt overscroll-behavior theo hướng hàng, bạn có thể cần sử dụng cử chỉ cuộn trên bảng cảm ứng hoặc màn hình chạm.

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

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

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;

属性值

技术细节

浏览器支持

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

相关页面

Tham khảo:Thuộc tính overscroll-behavior CSS

Tham khảo:Thuộc tính overscroll-behavior-block CSS

Tham khảo:Thuộc tính overscroll-behavior-x CSS

Tham khảo:Thuộc tính overscroll-behavior-y CSS

Tham khảo:Thuộc tính scroll-behavior CSS

Tham khảo:Thuộc tính scroll-margin CSS

Tham khảo:Thuộc tính scroll-padding của CSS

Tham khảo:Thuộc tính scroll-snap-align của CSS

Tham khảo:Thuộc tính writing-mode CSS