スクロールバーの色と太さは、標準のCSSプロパティ2行で変えられます。
.scrollbar {
overflow-x: auto;
scrollbar-color: #575966 transparent;
scrollbar-width: thin;
}初稿を書いた2023年当時はFirefoxが中心の実装でしたが、2024年から主要ブラウザで使えるようになりました。サイト側から調整できるのは、だいたいこの範囲までです。そもそも表示するかどうかを決めているのは、CSSではなくOSとユーザーの設定です。
標準プロパティでできること
scrollbar-width に指定できる値は auto、thin、none の3つで、任意のピクセル値は指定できません。none を選ぶとスクロール可能であることが視覚的に伝わらなくなるため、別の操作方法や手がかりを用意できない限り避けます。
scrollbar-color には、つまみであるthumbと背景であるtrackの色を、この順で指定します。
- scrollbar：スクロールバー全体
- thumb：スクロールバーのつまみ
- track：スクロールバーの背景
WebKit系の擬似要素で細部を調整する
Chrome、Edge、Safariなどでは、非標準の ::-webkit-scrollbar 擬似要素を使うと、太さや角丸などを細かく調整できます。
.scrollbar::-webkit-scrollbar {
height: 6px;
}
.scrollbar::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 9999px;
}
.scrollbar::-webkit-scrollbar-thumb {
background-color: #575966;
border-radius: 9999px;
}この擬似要素は標準ではありません。標準の scrollbar-color や scrollbar-width に既定値以外を指定すると、対応ブラウザでは標準プロパティが ::-webkit-scrollbar-* より優先されます。標準プロパティで基本を整え、擬似要素は必要な環境だけを補うものとして扱う方が安全です。
表示の有無はOSと入力デバイスが決める
スクロールバーの表示方法は、OS、ブラウザ、ユーザー設定、入力デバイスによって変わります。macOSでは、トラックパッド利用時にスクロール中だけ表示される設定が一般的です。マウスを接続したときや「スクロールバーを常に表示」を有効にしたときは、同じブラウザでも表示が変わります。
Windowsでも、オーバーレイスクロールバーやアクセシビリティ設定によって、見た目や占有する幅が変わります。
サイト側から「必ず同じ見た目で、常に表示する」ことはできません。ユーザーの設定を上書きしようとせず、スクロールバーが一時的に見えなくても横へ続くことが伝わるデザインにします。次の項目を少し見切れさせる、スクロール用のボタンを用意する、項目数を表示するといった方法があります。
レイアウトのずれを防ぐ
クラシック形式のスクロールバーが表示されたときにレイアウト幅が変わることを防ぎたい場合は、scrollbar-gutter を使います。
.scrollbar {
overflow: auto;
scrollbar-gutter: stable;
}stable は、スクロールバーが領域を占有する環境で、表示前から余白を確保します。オーバーレイスクロールバーを常時表示させるプロパティではありません。
さいごに
スクロールバーは、ユーザーが選んだOS設定や入力方法の一部です。色や太さは軽く整えられますが、環境差まで消そうとすると、操作性やアクセシビリティを損ないかねません。
まず、その横スクロールが本当に必要かを確認します。必要なら標準プロパティを中心に最小限の調整を行い、横にコンテンツが続くことはスクロールバー以外の手がかりでも伝えます。