CSSの新常識！Scrollbar-Gutterでスクロールバーによるレイアウトズレを解消しよう

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
サイト制作をしていると、「スクロールバーが出たり消えたりするせいでレイアウトがずれる！」という悩み、経験ありませんか？

特にPC表示でよく起きるこの現象。
右側にスクロールバーが現れることで、横幅が数ピクセル小さくなり、ヘッダーやフッターがガタつく問題に頭を抱えたことがある方も多いはず。

そこで今回は、CSSの新プロパティ scrollbar-gutter を使って、スクロールバーによるレイアウトズレを防ぐスマートな方法をご紹介します！

スクロールバーでなぜレイアウトがズレるのか？

一般的に、スクロールバーはoverflow: auto や overflow: scroll によって必要なときだけ表示されます。
しかし、スクロールバーが コンテンツ領域の内側に表示されるブラウザでは、表示・非表示の切り替えによってレイアウト幅が変化してしまいます。

これまでの解決策は overflow-y: scroll を常に指定して「常にスクロールバーを出す」方法でしたが、見た目もよくないし、モバイルでは無意味…。

scrollbar-gutterとは？

scrollbar-gutter は、スクロールバーのスペースを確保しておくためのCSSプロパティです。
これを使うことで、スクロールバーが出ても出なくても、常に同じ余白がある状態を作れます。

基本構文

.container {
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

これだけで、スクロールバーによる横幅のズレが発生しなくなります！

使い方と実践例

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

これで、スクロールが出現してもボックスサイズは一定のままになります。

オプション指定：両側・強制スペースも可能

scrollbar-gutter は以下のようにオプションを組み合わせて使うことができます。

.scroll-area {
    scrollbar-gutter: stable both-edges;
  }

横スクロールやRTL対応が必要な場面でも活用できます。

対応ブラウザに注意

2025年現在の対応状況は以下の通りです。

フォールバック対応

未対応ブラウザ向けに、代替策を用意しておくと安心です。

 @supports (scrollbar-gutter: stable) {
    .scroll-area {
      scrollbar-gutter: stable;
    }
  }
  @supports not (scrollbar-gutter: stable) {
    .scroll-area {
      overflow-y: scroll; /* 最低限のフォールバック */
    }
  }

まとめ

scrollbar-gutter を使えば、スクロールバーの出現でガタッと動いてしまうレイアウトズレを、スマートに解決できます。

ちょっとした余白調整の工夫で、全体のUXがグッと向上しますので、これを機に取り入れてみてください！