CSS3 overscroll-behavior控制滾動下拉刷新和溢出效果

2019-04-29CSS3050
  • 詳情內容
  • 留言點評

CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為,一般用在滾動到頂部或者底部。

在 APP 中經常使用的抽屜導航(drawer)中,我們期望的效果是:滾動到底部時,滾動停止,因為我們到達了"滾動邊界"。

但是在 Web 頁面中滾動并不會停止,而是繼續滾動抽屜后面的內容。

我們稱這種行為叫滾動鏈接(scroll chaining)。

下拉刷新 pull-to-refresh

下拉刷新是一個在移動端經常使用的操作,Chrome 移動版也增加了下拉刷新的支持。

很多時候我們需要禁用原生的 pull-to-refresh 行為。

以前我們想出各種方式來處理滾動,比如:不讓頁面滾動,而是使用 touch 事件處理滾動行為,使用 100vw/vh 設置頁面高度禁止內容溢出或滾動,等等。。。

現在我們可以使用 overscroll-behavior。

overscroll-behavior 屬性有 3 個值:

auto - 默認。元素的滾動會傳播給祖先元素。

contain - 阻止滾動鏈接。滾動不會傳播給祖先,但會顯示元素內的原生效果。例如,Android 上的炫光效果或 iOS 上的回彈效果,當用戶觸摸滾動邊界時會通知用戶。注意:overscroll-behavior: contain 在 html 元素上使用可防止滾動導航操作。

none - 和 contain 一樣,但它也可以防止節點本身的滾動效果(例如 Android 炫光或 iOS 回彈)。

當一個 fixed 定位元素滾動到邊界時,會滾動元素后面的內容。

我們可以使用 overscroll-behavior: contain 阻止這種行為。使用 overscroll-behavior: contain 可以阻止滾動傳播給父元素

禁用下拉刷新 pull-to-refresh

禁用原生的下拉刷新效果,只需要在 body 或 html 元素添加:

body {
  overscroll-behavior-y: contain;
}

當我們阻止了原生的下拉刷新后,就可以實現自己定義的下拉刷新。否則會出現兩個下拉刷新

禁用炫光和回彈效果

將屬性制定為 none,可以禁用默認的滾動邊界效果。

body {
  overscroll-behavior-y: none;
}

如果想禁用左右滑動的手勢導航,可以使用 overscroll-behavior-x: none。

歡迎點評!也可以是問題反饋和建議

支持Ctrl+Enter提交
暫無留言,快搶沙發!
0

真心很贊,必須打賞!嗯,以資鼓勵~

點此打賞

99%看過的人還會看

海南环岛赛彩票奖金