overscroll-behavior

overscroll-behavior CSS 屬性是 overscroll-behavior-x 和 overscroll-behavior-y 屬性的合并寫法, 讓你可以控制瀏覽器過度滾動時的表現——也就是滾動到邊界。

默認情況下，當觸及頁面頂部或者底部時（或者是其他可滾動區域），移動端瀏覽器傾向于提供一種“觸底”效果，甚至進行頁面刷新。你可能也發現了，當對話框中含有可滾動內容時，一旦滾動至對話框的邊界，對話框下方的頁面內容也開始滾動了——這被稱為“滾動鏈”。
在某些情況下我們不想要這些表現，使用 overscroll-behavior 來去除不需要的滾動鏈。

一句話就是讓滾動時父元素滾動不觸發

屬性值

overscroll-behavior: [ contain | none | auto ]{1,2}

auto
默認效果

contain
設置這個值后，默認的滾動邊界行為不變（“觸底”效果或者刷新），但是臨近的滾動區域不會被滾動鏈影響到，比如對話框后方的頁面不會滾動。

none
臨近滾動區域不受到滾動鏈影響，而且默認的滾動到邊界的表現也被阻止

兼容性

目前Safari瀏覽器尚不支持，Chrome和Firefox瀏覽器均支持，IE瀏覽器則有近似效果屬性-ms-scroll-chaining代替，不過需要window 8及其以上版本的系統：

overscroll-behavior-x

這個CSS屬性用來控制當滾動到區域的水平邊界時的瀏覽器行為。

屬性值和overscroll-behavior一樣

overscroll-behavior-x: contain | none | auto

overscroll-behavior-y

這個CSS屬性用來控制當滾動到區域的垂直邊界時的瀏覽器行為。

屬性值和overscroll-behavior一樣

overscroll-behavior-y: contain | none | auto

總結

以上是生活随笔為你收集整理的overscroll-behavior的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。