使用 CSS overscroll-behavior 控制滾動行爲：自定義下拉刷新和溢出效果

dev-reading/fe 是一個閱讀、導讀、速讀的 repo，不要依賴於 dev-reading/fe 學習知識。本 repo 只是一個快速瞭解文章內容的工具，並不提供全文解讀和翻譯。你能夠經過本平臺快速瞭解文章裏面的內容，找到感興趣的文章，而後去閱讀全文。

本文地址：https://github.com/dev-readin...

閱讀時間大概 3 分鐘

---

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;
}

以前:

以後：

若是想禁用左右滑動的手勢導航，可使用 overscroll-behavior-x: none。

完整的 demo

Demo 地址：https://ebidel.github.io/demo...

源碼：https://github.com/ebidel/dem...

最終效果：

---

閱讀原文：Take control of your scroll: customizing pull-to-refresh and overflow effects

討論地址：使用 CSS overscroll-behavior 控制滾動行爲：自定義下拉刷新和溢出效果

若是你想參與討論，請點擊這裏