說說你是怎麼實現頁面阻尼效果的？

王铁柱6發表於2024-11-30

頁面阻尼效果，也稱為滾動回彈或拉伸回彈效果，通常用於模擬頁面邊緣的彈性，讓使用者在滾動到頁面邊界時，感受到一種類似拉伸橡皮筋的阻力效果。實現方式主要有以下幾種：

  1. CSS overscroll-behavior 屬性: 這是最簡單直接的方法。透過設定 overscroll-behavior 屬性，可以控制瀏覽器在滾動到邊界時的行為。

    • overscroll-behavior: contain; 阻止預設的滾動鏈，例如阻止滾動溢位到父元素。這會建立一種阻尼效果，因為滾動會在邊界處停止，但不會有明顯的回彈動畫。 這通常是最推薦的方式，效能最好，也最不容易引起其他問題。

    • overscroll-behavior-y: contain; 或 overscroll-behavior-x: contain; 可以分別控制垂直和水平方向的阻尼效果。

    body {
  overscroll-behavior: contain; /* 所有方向 */
  /* 或 */
  overscroll-behavior-y: contain; /* 僅垂直方向 */
}

  2. JavaScript 實現: 如果需要更精細的控制或自定義動畫效果，可以使用 JavaScript 來實現。

    • 監聽 scroll 事件: 透過監聽 scroll 事件，判斷滾動位置是否到達邊界，然後動態修改元素的樣式，例如 transform: translateY(offset)，來模擬回彈效果。 需要結合 transition 屬性實現平滑的動畫。

    • 使用第三方庫: 一些 JavaScript 庫，例如 better-scroll 等，提供了更方便的 API 來實現阻尼效果，並處理了各種相容性問題。

    const container = document.querySelector('.container');

container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight;
  const clientHeight = container.clientHeight;

  if (scrollTop === 0) {
    // 到達頂部邊界
    // ... 新增阻尼效果
  } else if (scrollTop + clientHeight === scrollHeight) {
    // 到達底部邊界
    // ... 新增阻尼效果
  }
});

  3. 使用專門的 CSS 庫: 一些 CSS 庫也提供了一些預設的阻尼效果樣式，可以直接使用。

選擇哪種方法取決於你的具體需求:

  • 對於簡單的阻尼效果，overscroll-behavior 足夠，並且效能最佳。
  • 對於需要自定義動畫或更復雜互動的場景，需要使用 JavaScript 實現。
  • 使用第三方庫可以簡化開發過程，但可能會增加專案體積。

需要注意的是: 在移動端，阻尼效果可能會與瀏覽器的預設下拉重新整理功能衝突。 如果需要保留下拉重新整理功能，需要仔細處理相關邏輯，避免衝突。 例如，可以根據下拉的距離和速度來判斷使用者是想要下拉重新整理還是隻是普通的滾動。

相關文章