サイト制作
内側をスクロールしたのに背景も動く？overscroll-behaviorの使いどころ
2026-11-08
この記事には広告・アフィリエイトリンクが含まれます。
スクロール領域の端で操作が外側へ伝わる現象を整理。containとnoneの違い、指定する場所、確認すべき操作を解説します。
端に着いた操作が、外側へ伝わっている
小さなスクロール枠を下まで送ったあと、そのまま操作すると背景のページも動くことがあります。スクロールチェーンと呼ばれる、内側から外側へスクロールが続く動きです。
overscroll-behaviorは、スクロールコンテナーの端へ到達したときの挙動を制御するCSSです。スクロールバーの見た目を変えるプロパティではなく、端で何が起きるかを調整します。
containとnoneは、反動の扱いが違う
containは、スクロールを外側へ続ける動作を抑えつつ、対応する環境の反動表現は残す指定です。noneは外側への伝播に加え、オーバースクロールの反動表現も抑えます。
縦方向だけを対象にするなら、overscroll-behavior-y: contain; のように方向を指定できます。ページ全体へ広く設定する前に、実際に問題が起きるスクロール領域を特定しましょう。
スクロールしている要素へ指定する
例として、高さを制限したパネルへ overflow: auto; と overscroll-behavior-y: contain; を指定する方法があります。指定先が、実際に内容をスクロールするコンテナーであることが重要です。
内側のただの文章要素へ書いても、期待する枠の挙動を変えられるとは限りません。開発者ツールで、どの要素に高さの制限とスクロールが付いているかを確認すると、設定先を見つけやすくなります。
背景固定や、フォーカス制御の代わりではない
この指定だけで、モーダルを開いたときの背景固定や、キーボードの移動範囲がすべて整うわけではありません。内側の外を直接スクロールする操作などは、別に考える必要があります。
マウスホイール、トラックパッド、タッチ操作で、枠の上端と下端を確認します。対応状況や端末の動作にも差があるため、対象環境での確認が必要です。何を止めたいのかを「外側への伝播」と具体化すると、必要以上にページの操作を制限せず調整できます。
