pull to refresh 無効化には、ページのスクロール要素（通常はbodyかhtml）にoverscroll-behavior-y: containを設定します。
body {
overscroll-behavior-y: contain;
}これは、このプロパティに関するChromeの記事にある1行の例です。その記事は、pull-to-refreshを無効にしつつ、オーバースクロールの光の効果は残すと説明しています（Chrome for Developers、2017年）。このプロパティは、スクロールがスクロールコンテナーの端に達したときの動きを制御します。MDNは、ブラウザーの「引っ張って更新」の動作をなくすことを用途の1つに挙げています（MDN、2026年10月）。対応状況は一様ではありません。MDNはoverscroll-behaviorをBaselineではないと示しており、Safariの対応は部分的なので、対象とする端末で確認してください。
overscroll-behaviorの働き
overscroll-behaviorは、端に達したスクロールが親に伝わるかどうか、そしてブラウザー独自のオーバースクロールの効果を表示するかどうかを決めます。MDNによると、既定ではモバイルブラウザーは、ページやスクロール領域の上端または下端に達すると、バウンド効果やページの再読み込みを行うことがあります。このプロパティには4つのキーワードがあります（MDNの定義）。
| 値 | 親へのスクロールチェーン | バウンド効果 |
|---|---|---|
auto |
許可（既定） | 許可 |
contain |
防止 | 発生することがある |
none |
防止 | 防止 |
chain |
許可 | 防止 |
スクロールチェーンとは、子要素が端に達したとき、そのスクロールを親に渡すブラウザーの既定の動きです。Chromeの例では、アプリのドロワーが下端に達すると、その背後のページがスクロールし始めます。overscroll-behaviorはoverscroll-behavior-xとoverscroll-behavior-yの省略形で、2つのキーワードを指定すると、x、yの順に設定されます。
pull to refreshには contain と none のどちらを使うか
更新を止めつつプラットフォームのオーバースクロールの反応を残したいならcontainを、効果もまとめて取り除きたいならnoneを使います。Chromeの記事では、containはスクロールチェーンを防ぎつつ、Androidのオーバースクロールの光などローカルな効果は表示されたままになると説明されています。noneは、同じ効果を取り除いたものです。ページ自体でpull to refreshを止めるには、次のようにします。
/* pull to refresh を止め、光は残す */
body { overscroll-behavior-y: contain; }
/* 光とゴム引きの動きも取り除く */
body { overscroll-behavior-y: none; }Chromeの記事は、htmlに設定した場合、containがオーバースクロールによるナビゲーションを防ぐことにも触れています。また、横方向のnoneは左右のスワイプによるナビゲーションを止めるはずでしたが、この記事が書かれた2017年時点では、Chromeにはまだ実装されていませんでした。スワイプのジェスチャーに頼る前に、現在の動作を確認してください。
pull to refreshを無効にすると、人々が再読み込みに使っているジェスチャーがなくなります。ページがライブデータを表示する場合は、ブラウザーのジェスチャーがなくなるため、更新ボタンか独自の引っ張り更新を用意してください。
bodyかスクロール要素か
プロパティは、スクロールするコンテナーにだけ効くので、スクロールする要素に設定します。ページ全体の場合は、ビューポートを定義する要素、つまりhtmlかbodyです。内部のパネル、ドロワー、チャットの一覧などの場合は、そのパネルに設定します。
.chat-list {
height: 12em;
overflow: auto;
overscroll-behavior: contain;
}これにより、リストの末尾に達したときに、パネルの背後のページがスクロールするのを防げます。MDNの例でもダイアログに同じパターンを使っています。MDNの注意点は2つあります。
overflow: hiddenの要素のように、スクロール可能な領域がないスクロールコンテナーは、常にスクロールの端にあります。そのため、既定以外のoverscroll-behaviorを設定すると、祖先へのチェーンが防がれます。MDNは、ダイアログやオーバーレイが開いている間の背景のスクロールを防げると説明しています。<iframe>はスクロールコンテナーではないので、iframe要素にこのプロパティを設定しても効果はありません。iframe内からチェーンを制御するには、iframeのドキュメントのhtmlとbodyの両方に設定します。
2026年のブラウザー対応
キーワードのauto、contain、noneは、Chrome 63、Firefox 59、Safari 16（Safari iOS 16）以降でサポートされています（MDN browser-compat-data 8.1.7、2026年10月）。Safariの対応は部分的とされています。スクロール可能な領域がないスクロールコンテナーには効果がなく、Samsung Internetにも同じ部分対応の注記があります。chainキーワードはより新しく、BCDではChrome 150とFirefox 157から記載されており、Safariにはありません。BCDには、このプロパティの別のトップレベルのエントリもあり、そちらはChrome 144とFirefox 150から始まります。そのため、web-features 3.44.0はこのプロパティをBaselineとして載せておらず、MDNも、最も広く使われるブラウザーの一部では動かないため「Baselineではない」としています。
pull to refreshにとっての意味は次のとおりです。Chromeの記事が使っている、containまたはnoneを付けたoverscroll-behavior-yの長い形式が基本です。Safari 16はこのプロパティに対応しました（WebKit、2022年9月）。ただし、iPhoneのSafariがページ全体の引っ張り更新のジェスチャーを止めるかどうかは、WebKitのリリースノートにもMDNにも書かれていません。iPhoneで確認してください。
スマートフォンでの確認方法
pull to refreshは、タッチのジェスチャーなので、実機かエミュレーターでテストしてください。
- スマートフォンでページを読み込み、いちばん上までスクロールしてから下にドラッグします。CSSがなければ、ブラウザーが再読み込みしたりバウンドしたりすることがあります。
bodyにoverscroll-behavior-y: containを設定すると、何も再読み込みされないはずです。 - ネストされたパネルを末尾までスクロールし、そのままドラッグし続けます。パネルに
containが設定されていれば、背後のページは止まったままのはずです。 - サポートしているブラウザーごとに繰り返します。AndroidのChrome、iPhoneのSafari、Samsung Internetには、それぞれ上記の注記があります。
- インストール済みのウェブアプリを出している場合は、そちらでも繰り返します。プラットフォームごとにインストールの仕方がどう違うかは、プログレッシブウェブアプリとはを参照してください。
デスクトップからAndroidを確認する方法は、デスクトップからAndroidでウェブサイトをテストするにあります。スマートフォンがないiOSの確認は、iPhoneがなくてもiPhoneでテストするを参照してください。モバイルのテスト全体については、モバイルサイトのテストチェックリストが参考になります。
Mobile View Extensionは、タブをスマートフォンのユーザーエージェント、画面サイズ、ピクセル比で読み込み直すため、レイアウトと、配信されているページを確認できます。ただし、マウスで操作するため、タッチイベントは送られず、その中でページを引っ張って更新することはできません。また、デスクトップ版Chromeのエンジンで描画するため、Safariの動きは再現されません。カスタムの更新ボタンのレイアウトを確認するのに使い、ジェスチャーの確認には端末かシミュレーターを使ってください。
よくある質問
CSSでpull to refreshを無効にするにはどうすればよいですか？
bodyかhtmlにoverscroll-behavior-y: containを設定します。Chromeの記事は、これを、オーバースクロールの光を残したままpull-to-refreshを無効にする1行として紹介しています。光も取り除くには、noneを使います。
overscroll-behaviorのcontainとnoneの違いは何ですか？
containはスクロールチェーンを防ぎますが、バウンド効果は発生することがあります。noneはチェーンとバウンドの両方を防ぎます（MDN）。ページでのpull to refreshには、Chromeの記事によれば、どちらも再読み込みを止めます。
overscroll-behaviorはSafariで動きますか？
Safari 16以降は、このプロパティに対応しています。ただし、部分的な実装で、スクロール可能な領域がないスクロールコンテナーには効果がありません（MDN browser-compat-data 8.1.7）。ページ全体のジェスチャーがどうなるかは、iPhoneで確認してください。
スクロールチェーンとは何ですか？
子のコンテナーがスクロールの端に達したとき、ブラウザーがそのスクロールを親のコンテナーに渡すことです。たとえば、ダイアログの末尾に達したときに、その背後のページがスクロールすることがあります。overscroll-behavior: containで防げます。