CSS overscroll-behavior-x 屬性
定義和用法
overscroll-behavior-x
屬性用于在 x 方向上嘗試滾動超出滾動邊界時,關閉元素的滾動鏈或過度滾動反饋。
注意:要在 x 方向上觸發 overscroll-behavior,您可能需要在觸摸板或觸摸屏上使用滑動手勢。
滾動鏈是指在一個元素上過度滾動會導致父元素的滾動行為。這是默認行為。
過度滾動反饋是當用戶嘗試滾動超出滾動邊界時給予的反饋。例如,在移動設備上,當嘗試滾動超出頁面頂部時,通常會伴隨著頁面刷新的視覺反饋。
實例
在 x 方向上關閉可滾動的 <div> 元素的滾動鏈:
#yellowDiv { overscroll-behavior-x: contain; }
CSS 語法
overscroll-behavior-x: auto|contain|none|initial|inherit;
屬性值
值 | 描述 |
---|---|
auto | 允許滾動鏈和過度滾動反饋行為。默認值。 |
contain | 允許過度滾動反饋行為,但不允許滾動鏈。 |
none | 不允許過度滾動反饋或滾動鏈行為。 |
initial | 將此屬性設置為其默認值。參閱 initial。 |
inherit | 從其父元素繼承此屬性。參閱 inherit。 |
技術細節
默認值: | auto |
---|---|
繼承性: | 否 |
動畫制作: | 不支持。請參閱:動畫相關屬性。 |
版本: | CSS3 |
JavaScript 語法: | object.style.overscrollBehaviorX="none" |
瀏覽器支持
表格中的數字表示首個完全支持該屬性的瀏覽器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
63.0 | 18.0 * | 59.0 | 16.0 | 50.0 |
* 在 Microsoft Edge 中,屬性值 none 會被視為 contain,這是不正確的。
相關頁面
參考:CSS overscroll-behavior-block 屬性
參考:CSS overscroll-behavior-inline 屬性