モーダルが開いている間、その下のページが連鎖してスクロールしてしまうのを回避するCSSの新しいテクニック

スクロールチェーン（スクロールの連鎖）とは、ページ上にスクロールするコンテンツ（ダイアログやモーダルなど）があり、そのコンテンツをスクロールして終点に到達するとその下のページのコンテンツもスクロールしてしまう現象です。

Chromeの次のバージョンで、この問題が数行のCSSで解決できるようになるので、紹介します。

Use overscroll-behavior: contain to prevent a page from scrolling while a <dialog> is open
by Bramus!

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• はじめに
• スクロールチェーン（連鎖）とは
• overscroll-behaviorの問題点
• スクロールチェーン（連鎖）を回避する方法

はじめに

2026年1月にリリース予定のChrome 144ではCSSのoverscroll-behaviorプロパティに小さな変更が加えられ、スクロール不可のスクロールコンテナでも機能するようになります。

この変更は些細なことだと思うかもしれませんが、デベロッパーが長年抱えてきたスクロールチェーン、つまりdialog要素でモーダルが開いている間にその下のページが連鎖してスクロールしてしまう問題を解決することができます。

スクロールチェーン（連鎖）とは

CSSのoverscroll-behaviorプロパティは、スクロール領域に到達した際にブラウザがどう動作すべきかを制御します。

たとえば、overscroll-behavior: contain;に設定すると、スクロールチェーンは発生せず、下層要素はスクロールされなくなります。

下記のデモで、Enableのチェックをオン・オフにしてご覧ください。

See the Pen
overscroll-behavior: contain by coliss (@coliss)
on CodePen.

overscroll-behaviorの問題点

overscroll-behaviorの問題点は、スクロール可能なコンテナに対してのみ機能することです。

たとえば、スクロールしないdialogにoverscroll-behavior: contain;を設定しても、overscroll-behaviorは何も機能しません。overscroll-behaviorが機能する二は、少なくとも1ピクセルのオーバーフローが存在する必要があります。

Chrome 144ではこの点が変更され、仕様の意図通りに、スクロール不可のスクロールコンテナでもoverscroll-behaviorが機能するようになります。overflow: auto;を設定してもオーバーフローがない場合、またはoverflow: hidden;を設定している場合は、スクロール不可のスクロールコンテナが生成されます。

スクロールチェーン（連鎖）を回避する方法

この変更は最初は気づかれないかもしれませんが、デベロッパーが長年抱えてきたスクロールチェーンの問題を解決します。つまりdialog要素でモーダルが開いている間、ページがスクロールしないようにする、です。

Chrome 144以降では、数行のCSSだけで解決します。

コードの鍵となるのは、::backdropにはoverflow: hidden;を必ず設定することです。これにより::backdropはスクロール不可のスクロールコンテナになります。

下記のデモをChrome 144で試してみてください。

See the Pen
Use overscroll-behavior: contain; on ::backdrop to prevent a page from scrolling when a <dialog> is open! by coliss (@coliss)
on CodePen.

「Show Dialog」でダイアログを表示している間、ページがスクロールしてしまう場合はChrome 144以降を使用していません。Chrome 144以降であれば、ページはスクロールしません。

この仕様の意図通りの挙動を他のブラウザも実装することを願っています。これはデベロッパーが長年悩まされていた問題を解決するもので、回避策としてhtmlにoverflow: hidden;を設定するだけでは不十分だからです。