CSS overscroll-behavior 屬性
更多“自己嘗試”的例子見下文。
定義和用法
overscroll-behavior
屬性用於在嘗試滾動到滾動邊界之外時,關閉元素上的滾動鏈或過滾動提示。
滾動鏈是指在某個元素上超滾動導致父元素也發生滾動行為。這是預設行為。
超滾動效果是指使用者嘗試滾動超出滾動邊界時出現的反饋。例如,在移動裝置上,當嘗試滾動到頁面頂部上方時,通常會伴隨頁面刷新出現視覺反饋。
overscroll-behavior
屬性是以下屬性的簡寫:
overscroll-behavior
屬性的值可以以不同的方式設定:
如果 overscroll-behavior 屬性有兩個值
- overscroll-behavior: none contain;
- x軸方向:沒有 overscroll-behavior
- y軸方向:沒有滾動鏈,但允許過滾動提示
如果 overscroll-behavior 屬性有一個值
- overscroll-behavior: contain;
- x軸或y軸方向都沒有滾動鏈,但允許過滾動提示
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
overscroll-behavior | 63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* 在 Microsoft Edge 中,屬性值 'none' 被視為 'contain',這是不正確的。
CSS 語法
overscroll-behavior: auto|contain|none|initial|inherit;
屬性值
值 | 描述 |
---|---|
auto | 允許滾動鏈和超滾動效果。這是預設設定。 |
contain | 允許超滾動效果,但不允許滾動鏈。 |
none | 不允許超滾動效果或滾動鏈。 |
initial | 將此屬性設定為其預設值。閱讀關於initial |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
雙值語法
當 overscroll-behavior
屬性值設定為 'auto none' 時,x軸方向允許滾動鏈和過滾動提示,但y軸方向不允許。
#pinkDiv {
overscroll-behavior: auto none;
}
自己動手試一試 »
相關頁面
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 屬性