CSSオーバースクロール動作ジェネレーターとは
overscroll-behaviorは、スクロール可能な領域がその境界に達したときに何が起こるかを制御します。モバイルデバイスでは、オーバースクロールがプル・トゥ・リフレッシュをトリガーしたり、モーダルから背後にあるページにスクロールが漏れたりする可能性があります。このプロパティを使用すると、body、モーダル、サイドバー、カルーセル要素のオーバースクロール効果を抑制または防止できます。
クイックアンサー
スクロール可能な要素がその境界に達したときの動作を制御します。containを使用してスクロール連鎖を停止しながらバウンス効果を維持するか、noneを使用してプル・トゥ・リフレッシュを含むすべてのオーバースクロール効果を除去します。
Last updated: 2026-06-11
制限事項
- overscroll-behaviorは主にモバイルに関するものです。デスクトップブラウザはオーバースクロール効果をほとんど、またはまったく適用しないため、デスクトップでの視覚的な影響はほとんどありません。
- デスクトップでのoverscroll-behaviorのテストには、マウススクロールとタッチジェスチャーの動作が大きく異なるため、DevToolsでのデバイスエミュレーションが必要です。
- overscroll-behaviorはドキュメント境界でのスクロール連鎖のみを制御します。ビューポート端にないネストされたスクロール可能コンテナ内でのスクロール伝播は防止しません。内部スクロールの抑制には、内側のコンテナにもoverscroll-behaviorを適用してください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- オーバースクロール動作を制御したいシナリオを選択します。
- 動作を選択します。containはスクロール連鎖を停止しますがバウンスは維持します。noneはすべてのオーバースクロール効果を防止します。
- 水平または垂直のオーバースクロールのみを個別に制御したい場合は、軸を選択します。
- CSSをコピーして実際のモバイルデバイスでテストし、期待どおりの動作を確認します。
主な用途
- ページ本文のプル・トゥ・リフレッシュを防止しながら、垂直スクロールは維持する。
- モーダルやドロワーが開いているときに背景ページのスクロールを停止する。
- カルーセル内の水平スクロールを抑制して、戻る/進むナビゲーションをトリガーしないようにする。