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

要約

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

背景

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

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

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

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

プルして更新する効果

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

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

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

改善の余地があります。

overscroll-behavior のご紹介

overscroll-behavior プロパティは、コンテナ（ページ自体を含む）をオーバースクロールしたときに発生する動作を制御する新しい CSS 機能です。これを使用して、スクロール チェーンをキャンセルしたり、プルして更新アクションを無効化/カスタマイズしたり、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 なしでは実現が難しかった最適なユーザー エクスペリエンスを提供できます。

デモを見る | ソース