scrollbar-gutter

auto

初期値。従来のスクロールバーは overflow が scroll のとき、または overflow が auto でボックスがはみ出したときにガターができます。オーバーレイスクロールバーは空間を使いません。

stable

従来のスクロールバーを使用している場合、ボックスが溢れていなくても、overflow が auto、scroll、hidden のいずれかの場合はガターができます。 オーバーレイスクロールバーを使用している場合は、ガターは存在しません。

both-edges

ボックスのインライン方向の先頭/末尾の端のどちらかにガターを表示した場合、反対側の端にもガターを表示します。

scrollbar-gutter = 
  auto                   |
  stable && both-edges?  

次の例は、scrollbar-gutter プロパティの異なる値が、1 つ以上の段落を含むスクロール可能な div 要素（.container）にどのように影響するかを示しています。

コンテンツが大きくなったり小さくなったりすることでスクロールバーが表示されたり消えたりするため、そのための空間が確保され、不要なレイアウト変更を防ぐことができます。

.container {
  scrollbar-gutter: stable;
}

ボックスの両側に左右対称の空間を追加し、コンテンツが中央に来るようにします。

.container {
  scrollbar-gutter: stable both-edges;
}

スクロールしない要素と、それに隣接するスクロールする要素の内容を揃えます。 この例では、2 つの div を横に並べています。左側のものはスクロールしませんが、右側のものはスクロールします。両方とも scrollbar-gutter が適用されており、スクロール可能なコンテンツを持たない左側の div のための空間も確保されています。これは、コンテンツの幅を一定に保つために使う良いテクニックです。

.container1 {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.container2 {
  scrollbar-gutter: stable;
}

参考までに、この画像は上記と同じ div を示していますが、ユーザーのシステム設定がスクロールバーをオーバーレイするように設定されています。ここでは、スクロールバーはユーザーがスクロールしているときだけ表示され、コンテンツの上に表示されるため、スクロールバーのための空間は確保されず、scrollbar-gutter プロパティは影響しないことに注意してください。

• CSS オーバーフローモジュール
• CSS スクロールバースタイル設定モジュール
• overflow
• scrollbar-width
• scrollbar-color