スクロールの制御 - 下にスワイプして更新やオーバーフロー効果のカスタマイズ

要約

CSS overscroll-behavior プロパティを使用すると、コンテンツの上部または下部に到達したときに、ブラウザのデフォルトのオーバーフロー スクロール動作をオーバーライドできます。ユースケースとしては、モバイルで「プルして更新」機能を無効にする、オーバースクロールのグロー効果やラバーバンド効果を削除する、ページ コンテンツがモーダルやオーバーレイの下にある場合にスクロールを防ぐ、などがあります。

背景

スクロール境界とスクロール チェーン

Android 版 Chrome でのスクロール チェーン

スクロールはページを操作する最も基本的な方法の 1 つですが、ブラウザのデフォルトの動作が奇妙であるため、UX パターンによっては対処が難しい場合があります。たとえば、ユーザーがスクロールしなければならない可能性のあるアイテムが多数あるアプリドロワーについて考えてみましょう。コンテナが一番下に達すると、消費するコンテンツがなくなるため、オーバーフロー コンテナはスクロールを停止します。つまり、ユーザーが「スクロール境界」に達したということです。ただし、ユーザーがスクロールを続けるとどうなるかに注目してください。ドロワーの後ろにあるコンテンツがスクロールを開始します。スクロールは親コンテナ（この例ではメインページ自体）が引き継ぎます。

この動作はスクロール チェーンと呼ばれ、コンテンツをスクロールする際のブラウザのデフォルトの動作です。デフォルト設定は多くの場合優れていますが、望ましくない、または予期しないこともあります。一部のアプリでは、ユーザーがスクロール境界に達したときに異なるユーザー エクスペリエンスを提供する必要があります。

「スワイプして更新」効果

プルトゥ リフレッシュは、Facebook や Twitter などのモバイルアプリで広く使用されている直感的なジェスチャーです。ソーシャル フィードを下に引っ張って離すと、新しいスペースが作成され、最新の投稿が読み込まれます。実際、この UX は非常に人気が高く、Android の Chrome などのモバイル ブラウザにも同じ効果が採用されています。ページの上部を下にスワイプすると、ページ全体が更新されます。

Twitter のカスタムの「下にスワイプして更新」
: PWA でフィードを更新
Chrome Android のネイティブの「プルして更新」アクション
は、ページ全体を更新します。

Twitter の PWA などの状況では、ネイティブのプルして更新アクションを無効にすることをおすすめします。その理由は、このアプリでは、ユーザーが誤ってページを更新しないようにする必要があります。また、二重更新アニメーションが表示される可能性もあります。または、ブラウザのアクションをカスタマイズして、サイトのブランディングに沿ったものにすることもできます。残念ながら、このタイプのカスタマイズは難しいものでした。デベロッパーは、不要な JavaScript を記述したり、非パッシブなタップ リスナーを追加してスクロールをブロックしたり、ページ全体を 100vw/vh の <div> に固定したり（ページのオーバーフローを防ぐため）していました。これらの回避策は、スクロールのパフォーマンスに悪影響を及ぼすと十分に文書化されています。

改善の余地があります。

overscroll-behavior のご紹介

overscroll-behavior プロパティは、コンテナ（ページ自体を含む）をオーバースクロールしたときに発生する動作を制御する新しい CSS 機能です。スクロール チェーンのキャンセル、pull して更新するアクションの無効化/カスタマイズ、iOS でのラバーバンド効果の無効化（Safari が overscroll-behavior を実装している場合）などに使用できます。一番の利点は、overscroll-behavior を使用すると、冒頭で説明したハックのようにページのパフォーマンスに悪影響を与えないことです。

このプロパティには、次の 3 つの値を指定できます。

  1. auto - デフォルト。要素で発生したスクロールは、祖先要素に伝播される場合があります。
  2. contain - スクロールの連鎖を防ぎます。スクロールは祖先には伝播されませんが、ノード内のローカルな影響は表示されます。たとえば、Android のオーバースクロール グロー効果や、スクロール境界に達したことをユーザーに通知する iOS のゴムバンド効果などです。注: html 要素で overscroll-behavior: contain を使用すると、オーバースクロール ナビゲーション アクションを回避できます。
  3. none - contain と同じですが、ノード自体のオーバースクロール効果（Android のオーバースクロール グローや iOS のラバーバンドなど）も防止します。

例を見ながら、overscroll-behavior の使い方を学びましょう。

スクロールで固定位置の要素がエスケープされないようにする

チャットボックスのシナリオ

チャット ウィンドウの下のコンテンツもスクロールします。 :(

ページの下部に固定されたチャットボックスを検討してください。チャットボックスは自己完結型のコンポーネントであり、背後にあるコンテンツとは別にスクロールすることを目的としています。ただし、スクロール チェーンにより、ユーザーがチャット履歴の最後のメッセージをタップするとすぐに、ドキュメントのスクロールが開始されます。

このアプリでは、チャットボックス内で発生したスクロールをチャット内に留めることをおすすめします。これを行うには、チャット メッセージを保持する要素に overscroll-behavior: contain を追加します。

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

基本的に、チャットボックスのスクロール コンテキストとメインページを論理的に分離します。最終的には、ユーザーがチャット履歴の最上部または最下部に到達しても、メインページは開いたままになります。チャットボックスで開始されたスクロールは外部に伝播されません。

ページ オーバーレイのシナリオ

「スクロール下」のシナリオの別のバリエーションとして、固定位置オーバーレイの背後にスクロールするコンテンツがあります。overscroll-behavior を贈りましょう。ブラウザはユーザーをサポートしようとしていますが、結果的にサイトがバグがあるように見えてしまいます。

例 - overscroll-behavior: contain ありと overscroll-behavior: contain なしのモーダル:

以前: ページ コンテンツがオーバーレイの下にスクロールします。
修正後: ページ コンテンツがオーバーレイの下にスクロールされなくなります。

プルして更新を無効にする

「スワイプで更新」アクションを無効にするには、CSS の 1 行で可能です。ビューポートを定義する要素全体でスクロール チェーンを防ぐだけです。ほとんどの場合、これは <html> または <body> です。

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

この簡単な追加により、チャットボックスのデモでプルして更新するアニメーションが 2 回表示されるのを修正し、代わりに、より見やすい読み込みアニメーションを使用するカスタム エフェクトを実装できます。受信トレイが更新されると、受信トレイ全体がぼかされます。

変更前
変更後

以下に、コード全体のスニペットを示します。

<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;
}
変更前: スクロール境界に達するとグローが表示されます。
変更後: グローが無効になります。

完全なデモ

まとめると、完全なチャットボックス デモでは、overscroll-behavior を使用してカスタムの「プルして更新する」アニメーションを作成し、チャットボックス ウィジェットのエスケープによるスクロールを無効にします。これにより、CSS overscroll-behavior なしでは実現が難しかった最適なユーザー エクスペリエンスを提供できます。

デモを見る | ソース