2種類のスクロールバーとscrollbar-gutterによる制御
動的的にコンテンツが増えるようなサービスでは、クラシックスクロールバーによって画面が崩れたような印象を与えてしまう場合がある。この記事では、クラシックスクロールバーとオーバーレイスクロールバーの軽い説明と、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;
}