CSS overscroll-behavior 屬性
- 上一頁 overflow-y
- 下一頁 overscroll-behavior-block
定義和用法
overscroll-behavior 屬性用于在嘗試滾動超出滾動邊界時，關閉元素的滾動鏈（scroll chaining）或過度滾動反饋（overscroll affordance）。
滾動鏈：當在一個元素上過度滾動時，會導致父元素的滾動行為。這是默認行為。
過度滾動反饋：當嘗試滾動超出滾動邊界時，向用戶提供的反饋。例如，在移動設備上嘗試滾動超出頁面頂部時，通常會顯示視覺反饋并刷新頁面。
overscroll-behavior 屬性是以下屬性的簡寫形式：
overscroll-behavior 屬性的值可以通過不同方式設置：
如果 overscroll-behavior 屬性有兩個值：
overscroll-behavior: none contain;
- x 方向：沒有過度滾動行為
- y 方向：沒有滾動鏈，但允許過度滾動反饋
如果 overscroll-behavior 屬性有一個值：
overscroll-behavior: contain;
- x 和 y 方向：沒有滾動鏈，但允許過度滾動反饋
實例
例子 1
關閉可滾動 <div> 元素的滾動鏈：
#yellowDiv {
overscroll-behavior: contain;
}
例子 2：雙值語法：
將 overscroll-behavior 屬性值設置為 auto none，允許 x 方向的滾動鏈和過度滾動反饋，但 y 方向不允許：
#pinkDiv {
overcroll-behavior: auto none;
}
CSS 語法
overscroll-behavior: auto|contain|none|initial|inherit;
屬性值
| 值 | 描述 |
|---|---|
| auto | 允許滾動鏈和過度滾動反饋行為。默認值。 |
| contain | 允許過度滾動反饋行為，但不允許滾動鏈。 |
| none | 不允許過度滾動反饋或滾動鏈行為。 |
| initial | 將此屬性設置為其默認值。參閱 initial。 |
| inherit | 從其父元素繼承此屬性。參閱 inherit。 |
技術細節
| 默認值： | auto |
|---|---|
| 繼承性： | 否 |
| 動畫制作： | 不支持。請參閱：動畫相關屬性。 |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.overscrollBehavior="none" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* 在 Microsoft Edge 中，屬性值 'none' 被當作 'contain' 處理，這是不正確的。
相關頁面
參考：CSS overscroll-behavior-x 屬性
- 上一頁 overflow-y
- 下一頁 overscroll-behavior-block
