Newly available 主要ブラウザで対応済みだが、Safari 18.2以降が必要。
スクロール Newly available

scrollbar-gutter

コンテンツの増減によりスクロールバーが表示・非表示になるとレイアウトがガタつく問題を解決する。scrollbar-gutter: stable を指定すると、スクロールバーが不要な場合でもそのスペースが確保され、レイアウトシフトを防げる。both-edges を追加すると左右対称にガターが確保される。

スクロールレイアウトシフト

概要

コンテンツの増減によりスクロールバーが表示・非表示になるとレイアウトがガタつく問題を解決する。scrollbar-gutter: stable を指定すると、スクロールバーが不要な場合でもそのスペースが確保され、レイアウトシフトを防げる。both-edges を追加すると左右対称にガターが確保される。

対応ブラウザ

デスクトップ

Chrome 94+
Edge 94+
Safari 18.2+
Firefox 97+

モバイル

Chrome Android 94+
Safari iOS 18.2+
Firefox Android 97+

基本構文

CSS 
/* スクロールバー分のスペースを常に確保 */
.content {
  overflow: auto;
  scrollbar-gutter: stable;
}

/* 左右対称にスペースを確保 */
.centered-content {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

実務での使いどころ

  • レイアウトシフト防止

    タブ切替やコンテンツの動的追加でスクロールバーが出現してもレイアウトがずれない。

注意点

  • overlay スクロールバー（macOSデフォルト）ではガターが不要なためスペースが確保されない場合がある。

アクセシビリティ

  • レイアウトシフトの防止はUX改善につながり、認知負荷の軽減に寄与する。

参考リンク