モーダルを表示した際、誤操作防止で背景を overflow: hidden; で固定するケースはポピュラーです。
ただ、仕組み上、その瞬間にブラウザのスクロールバーが消えるので、その幅の分だけ全体のレイアウトが一瞬「カクン」とズレてしまいます。昔からウェブ制作現場では超あるあるの悩みです。
で、これまではJSでスクロールバーの幅を計算してmargin-right を足したり、モーダル用に背景固定処理を書いたり、CSSのoverscroll-behavior: contain;を試してみたりと、あの手この手でやりくりしてきました。
が、いつの間にかこの課題を、CSSだけで超簡単に解消できるプロパティが爆誕していました。知らんかった……。
それが scrollbar-gutter です。
scrollbar-gutter
html {
scrollbar-gutter: stable;
}scrollbar-gutter は、スクロールバー用の空間をあらかじめ確保するCSSプロパティ。
スクロールバー領域を先に確保しておくことで、スクロールバーの表示・非表示による不要なレイアウト変更を防げます。
まさに今回のモーダル問題にうってつけです。
stable を指定すると、スクロールバーが表示されていない状態でも、スクロールバー用の領域を確保してくれます。
参考
scrollbar-gutter – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/scrollbar-gutter
モダンCSSゆえ、近年までは対応ブラウザに課題があったみたいですが、2026年現在はかなり現場投入しやすくなっています。
また、macOSなどでよくあるオーバーレイスクロールバー環境では、そもそもスクロールバーがレイアウトを押しのけないため、この問題自体が発生しない。そのため主にWindows環境などクラシックスクロールバーが表示される環境での対策となります。
デモ
See the Pen モーダル表示時の横ズレをscrollbar-gutterで防ぐ by MEMORUKA (@memoruka) on CodePen.
html { scrollbar-gutter: stable; } を外した状態と付けた状態で結果が異なります。
通常状態だと、dialog を起動した瞬間に、ブラウザのスクロールバーが消えるため、ウィンドウがカクっとズレます。
※オーバーレイスクロールバーの場合を除く。
一方、html { scrollbar-gutter: stable; } を指定しておくと、モーダルを起動してもスクロールバー領域が確保されたままなのでズレません。
長年の悩みがついにCSSで、それも超カンタンに解決されました。感無量ですわ。
効かない時のチェックポイント
モーダル表示にはJSプラグインを使うケースも多いと思いますが、その場合、プラグイン側がすでに独自のスクロールバー対策を持っていることがあります。
一例ですが、自分はモーダルにGLightboxを採用するケースが多いですが、html { scrollbar-gutter: stable; }を意気揚々と設定したところ、余計にカクンとズレて「あれ？」となりました。
GLightboxは、あらかじめズレ問題の対策が施されており、モーダルを開く時にスクロールバー幅を自動で計算し、.gscrollbar-fixerというクラスにスクロールバー分のmargin-rightを代入してくれます。
まあ、結局position: fixed;要素には効かないから、実質意味無いんだけど。。
これをscrollbar-gutter側で対応するなら、プラグイン側の補正を無効化しないとかえってズレます。
body.gscrollbar-fixer {
margin-right: 0 !important;
}設定してもカクンとズレる場合は、ブラウザやOSのスクロールバー設定だけでなく、既存CSSやプラグイン側の仕様とのバッティングも確認してみてください。
【了】
