scrollbar-gutter
scrollbar-gutter は CSS プロパティで、スクロールバーのための空間を確保することを可能にし、コンテンツが大きくなるにつれて不要なレイアウト変更を防ぐと同時に、スクロールが不要な場合に表示されることを避けることができます。
要素のスクロールバーの「ガター」は、境界の辺の内側とパディング辺の外側の間の空間で、ブラウザーはここにスクロールバーを表示することがあります。スクロールバーがない場合、ガターはパディングの延長として描画されます。
ブラウザーは、従来のスクロールバーとオーバーレイスクロールバーのどちらを使うかを、次のように決定します。
従来のスクロールバーは常にガターに配置され、存在すると空間を消費します。
オーバーレイスクロールバーは、ガターではなくコンテンツの上に配置され、通常は部分的に透明です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 94 | 94 | 97 | 18.2 | 94 | 18.2 | |
auto | 94 | 94 | 97 | 18.2 | 94 | 18.2 |
stable | 94 | 94 | 97 | 18.2 | 94 | 18.2 |
基本構文
CSS
/* Always reserve space for the scrollbar */
.content {
overflow: auto;
scrollbar-gutter: stable;
}
/* Reserve space symmetrically on both sides */
.centered-content {
overflow: auto;
scrollbar-gutter: stable both-edges;
}ライブデモ
実務での使いどころ
-
レイアウトシフト防止
タブ切替やコンテンツの動的追加でスクロールバーが出現してもレイアウトがずれない。
注意点
- overlay スクロールバー（macOSデフォルト）ではガターが不要なためスペースが確保されない場合がある。
アクセシビリティ
- レイアウトシフトの防止はUX改善につながり、認知負荷の軽減に寄与する。