🐭
【CSS】スクロールバーをカスタマイズする
まずは完成形
カスタマイズに必要なセレクターたち【基本】
-
::-webkit-scrollbar・・・スクロールバー全体 -
::-webkit-scrollbar-thumb・・・ハンドル部分 -
::-webkit-scrollbar-track・・・背景部分
解説
.scroll-a::-webkit-scrollbar {
width: 12px; /* 横幅 */
}
.scroll-a::-webkit-scrollbar-thumb {
background: #276976; /* ハンドルの色 */
}
.scroll-a::-webkit-scrollbar-track {
background: #DAEFEF; /* 背景色 */
}
特定の箇所のみスクロールバーを変更したい場合は、疑似要素::-webkit-○○の前に、クラス名を付けます。逆に全体に適用させたい場合は、クラス名無しで設定してください。
::-webkit-scrollbarでは、横幅に加え、高さ・背景色も設定できます。
背景については、::-webkit-scrollbar-trackに書いても同じ結果になります。
アレンジする【応用】
完成形2つ目の例の解説です。
ポイントは、::-webkit-scrollbar-thumbの左右に透明のボーダーを付けて、background-clip: padding-box;で背景色の範囲を制限すること。
/* スクロールバー2 */
.scroll-b::-webkit-scrollbar {
width: 16px;
}
.scroll-b::-webkit-scrollbar-thumb {
background: #276976;
border-radius: 8px;
border-right: 4px solid transparent; /* 透明なボーダーをつける */
border-left: 4px solid transparent; /* 透明なボーダーをつける */
background-clip: padding-box; /* 背景を切り取る */
}
.scroll-b::-webkit-scrollbar-track { /* 上下に余白を付ける */
margin-top: 4px;
margin-bottom: 4px;
}
background-clipが分からない方は、こちらをご覧ください。
単純にスクロールバーを非表示にする
::-webkit-scrollbarにdisplay:none;を指定してあげるだけで非表示にできます。
ただし、のちにも触れますが、サポートされていないブラウザもありますので、以下のように両方書くことをお勧めします。
.container::-webkit-scrollbar { /* Chrome, Safari 対応 */
display:none;
}
.container {
-ms-overflow-style: none; /* IE, Edge 対応 */
scrollbar-width: none; /* Firefox 対応 */
}
その他のセレクター【上級】
ほかにも、細かいカスタマイズも可能です。
-
::-webkit-scrollbar-button・・・上下のボタン部分 -
::-webkit-scrollbar-corner・・・縦横両方のスクロールバーがある時、右下の角部分 -
::-webkit-resizer・・・リサイズ部分（ドラッグで伸縮する部分）
サポートについて
2022年6月現在、IEとFirefoxはサポートされていません。
iOSも一部使えない機能がありますので、しっかり動作確認しながら進めましょう。
さいごに
スライドバーの灰色がダサくて、サイトの雰囲気に合わない…ということも良くありますよね。::-webkit-scrollbarを使いこなして表現の幅を広げましょう♪
Twitterで質問受け付けておりますので、分からないことがあればDMください！
参考
Discussion