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 屬性的結果。對于英文頁面，行內方向是從左到右的，塊方向是向下的。

在行內方向上關閉可滾動的 <div> 元素的滾動鏈：

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

將 <div> 元素的 writing-mode 屬性值設置為 'vertical-rl' 時，行內方向變為 y 方向，因此 overscroll-behavior-inline 現在在 y 方向上起作用，而不是 x 方向：

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

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

默認值：	auto
繼承性：	否
動畫制作：	不支持。請參閱：動畫相關屬性。
版本：	CSS3
JavaScript 語法：	object.style.overscrollBehaviorInline="none"

表格中的數字表示首個完全支持該屬性的瀏覽器版本。

Chrome	Edge	Firefox	Safari	Opera
63.0	18.0	59.0	16.0	50.0