HTML・CSSでAndroid版Chromeのプルダウン更新（Pull-to-Refresh）を無効化する方法

Chromeの「引っ張って更新」機能とは

これまでAndroid版Chromeでは、メニュー内に隠れる形で更新ボタンが提供されていましたが、近年のバージョンでは「プルダウンから更新（Pull-to-Refresh）」機能へと置き換えられました。画面上部を下方向にスワイプするだけでページが再読み込みされる、非常に便利な機能です。

しかしながら、Webアプリケーションやチャットツールなど、独自のスクロール操作を実装しているページでは、ユーザーが上下にスワイプしただけで意図せずページ全体が更新されてしまうことがあります。こうしたケースでは、この機能がむしろ邪魔になるため、無効化したいという需要があります。

overscroll-behavior-yプロパティで無効化する

プルダウンによる更新動作は、CSSのoverscroll-behavior-yプロパティを使えば簡単に制御できます。body要素に対して次のように指定してください。

body {
    /* プルダウン更新を無効化 */
    /* オーバースクロール時のグロー効果も制御される */
    overscroll-behavior-y: contain;
}

CSSのoverscroll-behaviorプロパティは、画面端でのオーバースクロール時の挙動を制御するものです。containを指定することで、スクロールが親要素へ伝播しなくなり、プルダウンによる更新アニメーションが発生しなくなります。

たとえばチャットボックスのようなデモ環境では、ページ全体が再読み込みされる際に受信トレイがぼやけるといった、二重の更新アニメーションが発生することがありました。上記の指定を加えることで、こうした問題を解消できます。

主な値と対応ブラウザ

overscroll-behaviorプロパティに設定できる主な値は以下の通りです。

• auto：デフォルトの動作。スクロールチェーンやプルダウン更新が有効になる
• contain：スクロールチェーンを防止し、プルダウン更新などの既定動作を抑制する
• none：スクロールチェーンとオーバースクロール効果の両方を無効化する

本プロパティはChrome 63以降、Firefox 59以降など、主要ブラウザでサポートされています。一方、iOS版Safariなど一部の環境では挙動が異なる場合があるため、必要に応じてtouch-actionプロパティとの併用も検討するとよいでしょう。