掌控捲動方式 - 自訂下拉即可重新整理和溢位效果

Majid Valipour
X GitHub 首頁

TL;DR

CSS overscroll-behavior 屬性可讓開發人員覆寫 瀏覽器預設溢位捲動行為時 內容。使用案例包括停用下拉即可重新整理功能 功能、移除過度捲動光暈和橡皮擦效果 並防止位於互動模式/重疊下方的網頁內容捲動

背景

捲動界線和捲動鏈結

在 Chrome Android 上進行捲動鏈結。

捲動是與網頁互動的最基本方式之一 某些使用者體驗模式可能難以處理 預設行為以含有大量檔案的應用程式導覽匣為例 供使用者捲動瀏覽的項目當頁面放到底部時 溢位容器會停止捲動畫面，因為沒有其他可用的內容。 也就是說 就會到達「捲動界線」。但請注意，如果使用者繼續 請捲動頁面導覽匣「之後」的內容會開始捲動！捲動為 被父項容器接管主網頁本身

導致此行為稱為「捲動鏈結」。瀏覽器的預設值 行為預設值通常很不錯 有時候則不需要或甚至出乎意料部分應用程式可能會 當使用者到達捲動邊界時，就會提供不同的使用者體驗。

拉動即可重新整理效果

下拉即可重新整理是一種符合直覺的手勢，由行動應用程式 (例如： Facebook 和 Twitter。將社群媒體動態消息向下拉並推出新內容 空間以載入更多最近張貼的訊息。事實上，這類使用者體驗 Android 版 Chrome 等行動瀏覽器已普及 相同的效果在頁面頂端向下滑動，即可重新整理整個頁面：

Twitter 自訂的下拉即可重新整理
功能，以重新整理 他們的 PWA。
Chrome 的 Android 原生的提取重新整理動作
重新整理了整個 頁面。

以 Twitter PWA 為例 建議您停用原生的下拉即可重新整理動作這是因為在本 以避免使用者不小心重新整理網頁。還有 二是重新整理動畫的可能性！此外， 適合自訂瀏覽器的動作 讓瀏覽器更貼近 品牌不幸的是，這類自訂功能 要漂亮開發人員撰寫不必要的 JavaScript、 非被動式 觸控事件監聽器 (封鎖捲動功能) 或讓整個網頁 100vh 或 vh <div> (防止頁面溢位)。這些解決方法 妥善記錄負面報導 影響捲動效能

我們可以做得更好！

隆重推出 overscroll-behavior

overscroll-behavior 屬性是新的 CSS 功能，可用來控管 捲動容器時的行為 (包括 網頁本身)。您可以使用它來取消捲動鏈結、停用/自訂 提取重新整理動作，在 iOS 上停用橡皮帶效果 (Safari 實作 overscroll-behavior) 等等。 最棒的是，使用 overscroll-behavior 不會對負面影響 網頁效能，例如簡介中提到的入侵手法！

此屬性接受三個可能的值：

  1. auto - 此為預設值。源自該元素的捲動可能會傳播至 祖系元素
  2. contain - 防止捲動鏈結。捲動不會套用到祖系 但會顯示節點中的本機效果舉例來說，過度捲動光暈 這類效果會通知使用者 當使用者達到捲動邊界時注意：使用 html 元素上的 overscroll-behavior: contain 可避免過度捲動 瀏覽動作。
  3. none - 與 contain 相同，但也會防止內部過度捲動效果 節點本身 (例如 Android 過度捲動光暈或 iOS 橡膠頻帶)。
，瞭解如何調查及移除這項存取權。

讓我們來看看幾個範例，瞭解如何使用 overscroll-behavior。

禁止捲動略過固定位置元素

即時通訊方塊情境

聊天室視窗下方的內容也會捲動 :(

建議你將聊天室固定在頁面底部的位置， 聊天方塊是獨立的元件，會捲動畫面 與背後的內容分開處理不過，由於捲動鏈結， 使用者點選即時通訊中的最後一則訊息時，文件就會開始捲動 。

就這個應用程式而言，建議您加入從 即時通訊方塊可以留在即時通訊中。做法是 overscroll-behavior: contain 新增至保留即時通訊訊息的元素：

#chat .msgs {
  overflow: auto;
  overscroll-behavior: contain;
  height: 300px;
}

基本上，我們在聊天視窗的捲動頁面時，建立了邏輯區隔。 主題和主要網頁因此，當主頁放在 使用者到達即時通訊記錄的頂端/底部。從 即時通訊方塊不會傳播。

頁面重疊畫面情境

「underscroll」的另一個變化版本就是看到 捲動瀏覽到固定位置疊加層之後。致命贈品 「overscroll-behavior」已完成排序！瀏覽器努力成為使用者的得力助手 反而會造成網站看起來有錯誤

範例 - 包含及不含 overscroll-behavior: contain 的互動視窗：

變更前：網頁內容會在疊加畫面下方捲動。
變更後：網頁內容不會在疊加畫面下方捲動。

停用下拉即可重新整理功能

只有一行 CSS 可以關閉下拉即可重新整理動作。只是防止 捲動鏈結。在多數情況下 <html> 或 <body>：

body {
  /* Disables pull-to-refresh but allows overscroll glow effects. */
  overscroll-behavior-y: contain;
}

我們推出這個簡單的新功能，修正了 即時通訊方塊示範，並可以 而是實作使用較差載入動畫的自訂效果。 重新整理整個收件匣時，也會同時加上模糊效果：

之前
變更後

這個 完整程式碼：

<style>
  body.refreshing #inbox {
    filter: blur(1px);
    touch-action: none; /* prevent scrolling */
  }
  body.refreshing .refresher {
    transform: translate3d(0,150%,0) scale(1);
    z-index: 1;
  }
  .refresher {
    --refresh-width: 55px;
    pointer-events: none;
    width: var(--refresh-width);
    height: var(--refresh-width);
    border-radius: 50%;
    position: absolute;
    transition: all 300ms cubic-bezier(0,0,0.2,1);
    will-change: transform, opacity;
    ...
  }
</style>

<div class="refresher">
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
  <div class="loading-bar"></div>
</div>

<section id="inbox"><!-- msgs --></section>

<script>
  let _startY;
  const inbox = document.querySelector('#inbox');

  inbox.addEventListener('touchstart', e => {
    _startY = e.touches[0].pageY;
  }, {passive: true});

  inbox.addEventListener('touchmove', e => {
    const y = e.touches[0].pageY;
    // Activate custom pull-to-refresh effects when at the top of the container
    // and user is scrolling up.
    if (document.scrollingElement.scrollTop === 0 && y > _startY &&
        !document.body.classList.contains('refreshing')) {
      // refresh inbox.
    }
  }, {passive: true});
</script>

停用過度捲動光暈和橡皮帶效果

如要在碰觸捲動邊界時停用彈跳效果，請使用 overscroll-behavior-y: none:

body {
  /* Disables pull-to-refresh and overscroll glow effect.
     Still keeps swipe navigations. */
  overscroll-behavior-y: none;
}
修改前：按下捲動邊界會顯示光暈。
變更後：停用亮度。

完整展示模式

總而言之 Chatbox 示範用法 overscroll-behavior 可建立自訂下拉即可重新整理動畫 並且停用捲動功能，以避開聊天方塊小工具的情況。如此一來，您就能 如果不使用 CSS，很難達成這個目標 overscroll-behavior。

觀看示範 | 來源
。