使用 CSS overscroll-behavior 控制滾動行為:自定義下拉刷新和溢出效果
CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為,一般用在滾動到頂部或者底部。
背景
滾動邊界和滾動鏈接(boundary & chaining)
在 APP 中經常使用的抽屜導航(drawer)中,我們期望的效果是:滾動到底部時,滾動停止,因為我們到達了"滾動邊界"。
但是在 Web 頁面中滾動並不會停止,而是繼續滾動抽屜後面的內容。效果如下:
我們稱這種行為叫滾動鏈接(scroll chaining)。
下拉刷新 pull-to-refresh
下拉刷新是一個在移動端經常使用的操作,Chrome 移動版也增加了下拉刷新的支持。
Twitter PWA 版本的自定義下拉
Chrome Android 版的原生下拉刷新
很多時候我們需要禁用原生的 pull-to-refresh 行為。
以前我們想出各種方式來處理滾動,比如:不讓頁面滾動,而是使用 touch 事件處理滾動行為,使用 100vw/vh
設置頁面高度禁止內容溢出或滾動,等等。。。
現在我們可以使用 overscroll-behavior
。
介紹 overscroll-behavior
overscroll-behavior
屬性有 3 個值:
-
auto
- 默認。元素的滾動會傳播給祖先元素。 -
contain
- 阻止滾動鏈接。滾動不會傳播給祖先,但會顯示元素內的原生效果。例如,Android 上的炫光效果或 iOS 上的回彈效果,當用戶觸摸滾動邊界時會通知用戶。註意:overscroll-behavior: contain
html
元素上使用可防止滾動導航操作。 -
none
- 和contain
一樣,但它也可以防止節點本身的滾動效果(例如 Android 炫光或 iOS 回彈)。
阻止 fixed 定位元素的滾動傳播
當一個 fixed
定位元素滾動到邊界時,會滾動元素後面的內容。如下:
我們可以使用 overscroll-behavior: contain
阻止這種行為。
如果我們有一個 fixed
定位的彈出層需要滾動時,默認是這樣的,如下:
使用 overscroll-behavior: contain
可以阻止滾動傳播給父元素,如下:
禁用下拉刷新 pull-to-refresh
禁用原生的下拉刷新效果,只需要在 body
html
元素添加:
body {
/* Disables pull-to-refresh but allows overscroll glow effects. */
overscroll-behavior-y: contain;
}
當我們阻止了原生的下拉刷新後,就可以實現自己定義的下拉刷新。否則會出現兩個下拉刷新:
之前:
之後:
禁用炫光和回彈效果
將屬性制定為 none
,可以禁用默認的滾動邊界效果。
body {
/* 禁用默認的下拉刷新和邊界效果
但是依然可以進行滑動導航 */
overscroll-behavior-y: none;
}
原文地址:https://segmentfault.com/a/1190000012014962
如果想禁用左右滑動的手勢導航,可以使用 overscroll-behavior-x: none
。
使用 CSS overscroll-behavior 控制滾動行為:自定義下拉刷新和溢出效果