CSS Reference

scrollbar-color

スクロールバーの色を指定する

scrollbar-color プロパティは、スクロールバーの色を指定します。

スクロールバーを構成するパーツのうち、「トラック」と「つまみ（ノブ）」、それぞれの色を指定することができます。「トラック」はスクロールバーの背景部分で、スクロール位置に関係なく固定表示されます。「つまみ（ノブ）」は、スクロールバーの動く部分のことで、つまみをドラッグして表示領域を移動する事ができるようになっています。

また、スクロールバーには、その末端に矢印アイコンなどを含む追加のボタン（「矢印（アロー）」などと呼ばれる）が配置される場合もあります。CSS仕様上では、このボタンが存在する場合にそこに色を付けるかどうか、またどのように付けるかについては定義していませんが、多くのユーザエージェントは、scrollbar-color プロパティでつまみの色として指定されたものが適用されます。

ただし、ユーザエージェントによってはスクロールバーのデザインが異なり、トラックの部分やボタンが非表示の場合もあります。そのため、必ずしもすべてのユーザエージェントで同様の見た目にはなりません。

スクロールバーを構成するパーツ
スクロールバー各部の名称

指定できる値は下記の通りです。

auto ユーザエージェントがスクロールバーの色を決定します。（既定値）
<color>{2} スクロールバーの色を2つの <color> 値で指定します。値は空白で区切ります。1つ目の値は「つまみ」に、2つ目の値は「トラック」に適用されます。

アクセシビリティを考慮し、スクロールバーに色を指定する場合は、トラックとつまみの色の間、かつスクロールバーが隣接するコンテンツとの間に十分なコントラスト比が確保されていることを確認してください。

scrollbar-colorの仕様

初期値
  • auto
対象となる要素
  • スクロールコンテナ
継承
  • あり

scrollbar-colorのサンプルソース

html {
  scrollbar-color: #0369a1 #e5e7eb;
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ×
iOS Safari ×
Android Chrome ○

関連するプロパティ

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome