2種類のスクロールバーとscrollbar-gutterによる制御
2 種類のスクロールバー
- クラシックスクロールバー
- コンテンツの隣に配置され、スクロール領域を占有する。
- さらにビューポートを拡張する。
- 従来のもの。
- オーバレイスクロールバー
- コンテンツに重ねて配置され、スクロール領域を占有しない。
- 近年はこちらが多い。
MacOS や Windows では、システム設定やアクセシビリティから、どのようにスクロールバーを利用するかをコントロールできる。この情報を受け取り、ブラウザがどちらのスクロールバーを表示するか決定する。デフォルトの挙動は MacOS 及び Windows 11 以降であれば、マウスを接続していればクラシックスクロールバー、接続していなければオーバーレイスクロールバーである。
このスクロールバーのタイプを CSS で制御することは出来ない。
クラシックスクロールバーによる問題
クラシックスクロールバーは、画面を一部占有するため、意図しない表示を招くケースが存在する。
スクロールバーの有無によるガタツキ
クラシックスクロールバーの場合、スクロールバーの有無によって要素の利用できる幅が変わるため、スクロールバーが表示されたり消えたりすると、要素の大きさが変わり、画面がガタついたような印象を与える。
100vw で横方向のスクロールバーが表示される
クラシックスクロールバーはビューポートに含まれるため、幅を 100vw で指定している要素がある場合、横方向にスクロールバーが表示されるようになる。overflow: hiddenを:rootなどに付けておけば防ぐことは出来る。
中央寄せが少しずれて見える
クラシックスクロールバーの場合、スクロールバーが領域を占有するため、中心がずれる。 デザインによっては、中心からズレたように見えてしまう場合がある。
scrollbar-gutter で事前に領域を確保しておく
scrollbar-gutterは、スクロールバー用のスペースを確保し、コンテンツの増加に伴う不要なレイアウト変更を防ぐとともに、スクロールが不要な場合に不要なビジュアルを表示しないようにする CSS プロパティである。
- auto：（デフォルト）スクロールバーの有無に左右される。
- stable：スクロールバーが存在しなくてもスペースを確保する。
- stable both-edges：コンテンツの両側にスペースを確保する。
このプロパティは、クラシックスクロールバーの場合のみ適用されるのが特徴的である。
そのため、scrollbar-gutterを指定することでオーバーレイスクロールバーの場合に余分な余白が発生するということはない。
.container { scrollbar-gutter: stable both-edges;}