# 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);
}

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

  • ::-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
2022-03-16
  • css

関連記事

Tailwindcss でローディングコンポーネント作成
Nuxt Fontawesome アイコン使う
シェアボタン SNS ソーシャルリンクの作り方
sass-loader エラー
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
google color palette
フルスクリーン背景画像の 100%表示と iPhone 対応方法
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる