使用 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 個值：

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

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

3. 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。