オーバースクロール挙動プロパティ

最終更新：2026-09-13

overscroll-behavior オーバースクロール挙動プロパティ

overscroll-behavior プロパティは、スクロールコンテナが境界に達した際の挙動を制御します。たとえば、スクロールイベントを親コンテナに渡す（スクロールチェーニング）か、ページの更新や履歴ナビゲーションなどのブラウザデフォルトを発動するかを決めます。入れ子になったスクロールコンテナの「スクロール貫通」問題を解決する重要なプロパティです。

カテゴリ
初期値	auto
継承	いいえ
適用対象
アニメーションタイプ
CSS バージョン	CSS3
状態	標準

📝 構文

overscroll-behavior: contain | none | auto;

⚙️ 値

値	タイプ	説明
`contain \| none \| auto`	キーワード	スクロール境界での挙動

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
overscroll-behavior	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
すべての主要ブラウザーでサポート

ヒント： contain はスクロールチェーニングをブロックするため、コンテナ内で境界までスクロールしても外側のコンテナは動かなくなります。none はさらに、iOS の弾性スクロールなどのブラウザのデフォルト境界挙動もブロックします。

ヒント： モーダル、サイドバー、フローティングパネルなどの入れ子スクロールがある場合は、ユーザーが背後のページを誤ってスクロールしないよう overscroll-behavior: contain を推奨します。

❓ よくある質問

Qoverscroll-behavior と touch-action の違いは何ですか？

Aoverscroll-behavior は境界に達した後のスクロールチェーンの伝播方法を制御します。外側のコンテナを動かすか、更新や弾性などのブラウザ挙動を発動するかを決めます。touch-action はブラウザがタッチジェスチャをどう解釈するか（パン、ズーム、ダブルタップズームを許可するか）を制御します。前者は端を超えてスクロールした際の挙動、後者はジェスチャの解釈を対象とします。解決する問題が異なります。

Qoverscroll-behavior: contain を設定したのにページがまだスクロールするのはなぜですか？

Aoverscroll-behavior はスクロールチェーニングにのみ作用します。内側のコンテナが境界に達し、スクロールを外側に渡そうとしたとき、contain はその受け渡しを遮断します。スクロールイベントがそもそもスクロールコンテナから来ていない場合や、モバイルで外側のページ自体が指でスクロールされている場合、contain は何もしません。また、実際にスクロールするコンテナにプロパティが設定されているか確認してください。

Qスクロールチェーニングとは何か、スクロール貫通をどう防ぐか？

Aスクロールチェーニングとは、内側の要素が境界までスクロールした後もスクロールが続き、親やページに渡されてしまう現象です（モーダル内のスクロールがページもスクロールさせるという典型的な貫通）。モーダルやサイドバー、ドロワーのコンテンツコンテナに overscroll-behavior: contain を設定して受け渡しを遮断します。none はさらに、プルリフレッシュや弾性などのブラウザデフォルトも無効にします。

Qoverscroll-behavior と overscroll-behavior-x/y の関係は？

Aoverscroll-behavior は両軸の境界挙動を一度に設定するショートハンドです。overscroll-behavior-x と overscroll-behavior-y は水平・垂直方向の個別プロパティ（ロングハンド）です。たとえば垂直方向のスクロールチェーニングのみをブロックするには overscroll-behavior-y: contain と書きます。