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

要約

CSS の overscroll-behavior プロパティを使用すると、 ブラウザのデフォルトのオーバーフロー スクロール動作は、 説明します。ユースケースとしては、「スワイプして更新」を無効にすることなどが挙げられます。 モバイルでのグロー効果やラバーバンド効果の削除 モーダルやオーバーレイの下のページ コンテンツをスクロールできないようにします。

背景

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

<ph type="x-smartling-placeholder">
</ph>
Chrome Android でのスクロール チェーン

スクロールはページを操作する最も基本的な方法の 1 つですが UX のパターンによっては 対応が難しい場合があります 動作しません。例として、アプリドロワーに ユーザーがスクロールしなければならない可能性のある項目を表示します。最小値に達すると、 消費するコンテンツがなくなったため、オーバーフロー コンテナはスクロールを停止します。 つまり、ユーザーは スクロール境界に到達したためですユーザーが会話を途中で終わらせても スクロールできます。ドロワーの背後のコンテンツがスクロールし始めます。スクロールは 親コンテナに引き継がれますメインページ自体も移動します

この動作はスクロール チェーンと呼ばれます。ブラウザのデフォルト スクロール時の動作を変更できます。多くの場合、デフォルトのままで問題ありませんが、 望ましくない場合もあれば、想定外の場合もあります。アプリによっては、 ユーザーがスクロール境界に達したときに、異なるユーザー エクスペリエンスを提供する。

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

「プルして更新する」は、次のようなモバイルアプリで広く利用されている、直感的な操作です。 Facebook と Twitter。ソーシャル フィードを下にスワイプして離すと、新しい 新しい投稿を読み込めます。実際、この特定の UX は 人気が高まり、Android 版 Chrome などのモバイル ブラウザに 影響します。ページの上部で下にスワイプすると、ページ全体が更新されます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Twitter のカスタムの「下にスワイプして更新」
でフィードを更新 導入しました
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Chrome Android のネイティブの「プルして更新」アクション
は、 できます。

Twitter の PWA のような状況では、 ネイティブの「pull して更新」アクションを無効にしたほうが良い場合があります。その理由は、この ユーザーが誤ってページを更新することは望ましくありません。また、 二重更新のアニメーションが表示される可能性もあります。別の方法として、 ブラウザのアクションをより適切にカスタマイズし、サイトの ブランディング。残念なことに、この種のカスタマイズは 実現するのが大変です開発者は不要な JavaScript を記述し、 非パッシブ タッチリスナー（スクロールをブロックする）を使用するか、ページ全体を 100vw/vh で固定する <div>（ページのオーバーフローを防ぐため）。これらの回避策により 裏付けとなる記録がネガティブ スクロールパフォーマンスへの影響を 修正できます

もっと良くできるよ！

overscroll-behavior のご紹介

overscroll-behavior プロパティは、 コンテナをオーバースクロールした場合の動作（ できます。これを使用して、スクロール チェーンのキャンセル、 スワイプして更新するアクション、iOS でのラバーバンド効果の無効化（Safari の場合） overscroll-behavior の実装など）が含まれます。 最も良い点は、overscroll-behavior を使用しても、 パフォーマンスに悪影響を及ぼします。

このプロパティは次の 3 つの値を取ります。

  1. auto - デフォルト。要素から発生したスクロールは、 継承されます。
  2. Contain - スクロールのチェーンを防止します。スクロールが祖先に伝播されない ノード内の局所的な影響は示されています。たとえば、オーバースクロールのグロー Android では効果、iOS ではラバーバンド効果によってユーザーに通知します。 スクロール境界に達したときに 警告が表示されることがあります注: html 要素の overscroll-behavior: contain でオーバースクロールを防ぐ 操作できます。
  3. none - contain と同じですが、内部でのオーバースクロール効果を防ぎます。 ノード自体を変更できます（Android のオーバースクロール グローや iOS のラバーバンドなど）。
で確認できます。

overscroll-behavior の使用方法について、いくつかの例を見てみましょう。

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

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

<ph type="x-smartling-placeholder">
</ph>
チャット ウィンドウの下のコンテンツもスクロールされます。

ページ下部の固定位置にあるチャットボックスについて考えてみましょう。「 チャットボックスが自己完結型のコンポーネントであり、 コンテンツとは別にしますただし、スクロールの連鎖により、 ユーザーがチャットの最後のメッセージをクリックすると、すぐにドキュメントのスクロールが開始されます できます。

このアプリでは、 チャット枠内に収まります。そのためには overscroll-behavior: contain を、チャット メッセージを保持する要素に追加します。

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

基本的には、チャットボックスのスクロールと メインページで表示されます。その結果、メインページは ユーザーがチャット履歴の最上部または最下部に達した。 反映されません。

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

「アンダースクロール」には、コンテンツの視認性が 固定位置オーバーレイの背後のスクロール。死んだプレゼント overscroll-behavior が並びました！ブラウザは便利さを追求していますが、 サイトがバグのように見えます

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 変更前: ページのコンテンツがオーバーレイの下にスクロールします。
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 変更後: ページのコンテンツがオーバーレイの下にスクロールしない。

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

クリックして更新するアクションは、CSS の 1 行で無効にできます。防ぐ ビューポートを定義する要素全体でスクロール チェーンを使用します。ほとんどの場合、 <html> または <body>:

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

この簡単な追加だけ、 チャットボックスのデモをご覧ください。 代わりに、わかりやすい読み込みアニメーションを使用するカスタム効果を実装します。「 受信トレイが更新されると受信トレイ全体がぼやけます。

<ph type="x-smartling-placeholder">
</ph>
変更前
<ph type="x-smartling-placeholder">
</ph>
変更後

これが BigQuery の 完全なコード:

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

完全なデモ

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> デモを見る | 出典