# CSS ::-webkit-scrollbar スクロールバーをカスタマイズ

スクロールバーはブラウザーや OS 環境によって見た目がバラバラです。::-webkit-scrollbar 疑似要素使って webkit 系のブラウザーを同じスクロールバーに統一表現できます。

/* 全体 */
body::-webkit-scrollbar {
  width: 5px;
  background: white;
}

/* コーナー、つまみ、背景設定 */
body::-webkit-scrollbar-corner,
body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-track {
  border-radius: 5px;
}
body::-webkit-scrollbar-corner,
body::-webkit-scrollbar-track {
  background-color: rgba(180, 160, 120, 0.1);
  box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.2);
}
body::-webkit-scrollbar-thumb {
  background-color: rgb(180, 160, 120);
}

スクロールバーカスタマイズに必要最低限の３つ擬似要素

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track

::-webkit-scrollbarプロパティは Google Chrome Safari Edge など webkit 系のブラウザにしか対応していないため、IE と Firefox では表現できません。

# 疑似要素

擬似要素	説明
`::-webkit-scrollbar`	スクロールバー全体
`::-webkit-scrollbar-button`	スクロールバー矢印ボタン
`::-webkit-scrollbar-thumb`	スクロールバーつまみ
`::-webkit-scrollbar-track`	スクロールバー背景
`::-webkit-scrollbar-corner`	水平と垂直の間にあるエリア
`::-webkit-scrollbar-track-piece`	スクロールバー軌道
`::-webkit-scrollbar-track-corner`	スクロールバー水平と垂直交差部分
`::-webkit-resizer`	サイズ変更用のつまみ

併用できる擬似クラス

擬似クラス	説明	対象となるパーツ
:horizontal	垂直方向	すべて
:vertical	水平方向	すべて
:corner-present	水平と垂直の交差部分がある場合	すべて
:window-inactive	ウィンドウがアクティブでない場合	すべて
:decrement	パーツがスクロールバーの減少方向にある場合	`-button` `-track-piece`
:increment	パーツがスクロールバーの増加方向にある場合	`-button` `-track-piece`
:start	つまみよりも前の部分	`-button` `-track-piece`
:end	つまみよりも後の部分	`-button` `-track-piece`
:no-button	スクロールバーにボタンがない場合	`-track-piece`