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