| 属性名 | scrollbar-gutter |
|---|---|
| 値 | auto | stable && both-edges? |
| 初期値 | auto |
| 適用可能要素 | スクロールコンテナ |
| 継承 | 継承しない |
| サポート | https://caniuse.com/mdn-css_properties_scrollbar-gutter |
スクロールバーの幅分のスペースをガターと呼びます。overflow に auto を指定した際、スクロールバーの有無によってガターの幅分コンテンツがガタついてしまうのを防ぎます。現時点では縦スクロールバーによるがたつきには対応できますが、横スクロールバーには対応できないようです。
古い Chrome で overflow に overlay を指定した場合や、Firefox のデフォルト動作ではオーバーレイスクロールバーというコンテンツ上部に覆いかぶさるようなスクロールバーを表示することができ、コンテンツの横幅に影響を与えないため、stable を指定してもガター領域は確保されません。ただし、Chrome ではオーバーレイスクロールバーは Chrome 114 で廃止されました。
下記は overflow:auto のみを指定した例です。枠の高さを変更するとスクロールバーの有無によりコンテンツにがたつきが生じます。
下記は overflow:scroll を指定した例です。あらかじめスクロールバーが表示されるのでコンテンツががたつくことはありませんが、スクロールが不要な場合にもスクロールバーが表示されてしまいます。
下記は overflow:auto に scrollbar-gutter:stable を加えた例です。あらかじめ右側にガター分のスペースが確保され、枠の高さを変更してもスクロールバーの有無によるがたつきは発生しません。ただし、横方向のスクロールバーに対してはがたつきを抑えることはできないようです。
下記は scrollbar-gutter に both-edges を加えた例です。左端にもガター分のスペースが確保され、コンテンツを中央配置させることができます。ただしスクロールバーが表示されると中央配置ではなくなります。
.my-example {
overflow: auto;
scrollbar-gutter: stable both-edges;
}