CSS overscroll-behavior-inline 屬性
更多“自己嘗試”的例子見下文。
定義和用法
overscroll-behavior-inline 屬性用於在元素到達內聯方向的滾動邊界時，關閉滾動鏈或超滾動效果。
注意：要橫向滾動以觸發內聯方向的超滾動行為，您可能需要使用觸控板或觸控式螢幕的手勢滑動。
滾動鏈是指在某個元素上超滾動導致父元素也發生滾動行為。這是預設行為。
超滾動效果是指使用者嘗試滾動超出滾動邊界時出現的反饋。例如，在移動裝置上，當嘗試滾動到頁面頂部上方時，通常會伴隨頁面刷新出現視覺反饋。
CSS 的 overscroll-behavior-inline 和 overscroll-behavior-block 屬性與 CSS 屬性 overscroll-behavior-x 和 overscroll-behavior-y 非常相似，但 overscroll-behavior-inline 和 overscroll-behavior-block 屬性取決於內聯和塊方向。
注意：相關的 CSS 屬性 writing-mode 定義了內聯方向。這會影響內聯方向是 x 方向還是 y 方向，以及 overscroll-behavior-inline 屬性的結果。對於英文頁面，內聯方向是從左到右，塊方向是向下。
| 預設值 | auto |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.overscrollBehaviorInline="none" 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| overscroll-behavior-inline | 63.0 | 18.0 | 59.0 | 16.0 | 50.0 |
CSS 語法
overscroll-behavior-inline: auto|contain|none|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 允許滾動鏈和超滾動效果。這是預設設定。 |
| contain | 允許超滾動效果，但不允許滾動鏈。 |
| none | 不允許超滾動效果或滾動鏈。 |
| initial | 將此屬性設定為其預設值。閱讀關於initial |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
結合 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 屬性： CSS Overscroll-behavior 屬性
CSS overscroll-behavior-block 屬性： CSS Overscroll-behavior-block 屬性
CSS overscroll-behavior-x 屬性： CSS Overscroll-behavior-x 屬性
CSS overscroll-behavior-y 屬性： CSS Overscroll-behavior-y 屬性
CSS scroll-behavior 屬性： CSS Scroll-behavior 屬性
CSS scroll-margin 屬性： CSS Scroll-margin 屬性
CSS scroll-padding 屬性： CSS Scroll-padding 屬性
CSS scroll-snap-align 屬性：CSS Scroll-snap-align 屬性
CSS writing-mode 屬性：CSS Writing-mode 屬性
