scrollbar-colorとは？
scrollbar-colorプロパティは、スクロールバーのデザインをカスタマイズできるプロパティです。このプロパティを使用すると、スクロールバーのトラック（背景）とサム（つまみ）の色を指定して変更することができます。
scrollbar-widthとは？
scrollbar-widthプロパティは、スクロールバーの太さを簡単に制御できるプロパティです。このプロパティを利用することで、スクロールバーの表示時の最大の太さを設定することができます。
基本的な使い方
scrollbar-color
下記の様に第1引数に「つまみの色」、第2引数に「トラック（背景）」の色を指定できます。
/* 第1引数: つまみの色, 第2引数: トラック(背景)の色 */
scrollbar-color: #6969dd #e0e0e0;
/* デフォルトの配色に戻す */
scrollbar-color: auto;scrollbar-width
スクロールバーの太さを制御できます。
/* デフォルトのスクロールバー */
scrollbar-width: auto;
/* 細いスクロールバー */
scrollbar-width: thin;
/* スクロールバーを非表示 */
scrollbar-width: none;実装例
下記実際の使用例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollbar</title>
<style>
body {
max-width: 1200px;
display: flex;
flex-direction: column;
margin: 0 auto;
}
h2 {
margin-bottom: 10px;
}
.thin {
scrollbar-width: thin;
scrollbar-color: #6969dd #e0e0e0;
}
.auto{
scrollbar-width: auto;
scrollbar-color: #888 #2a2a2a;
}
.none {
scrollbar-width: none;
scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}
.content {
height: 100px;
width: 1200px;
margin: 0 auto 10px auto;
overflow-y: scroll;
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>autoのスクロールバー</h2>
<div class="content thin">
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
</div>
<h2>thinのスクロールバー</h2>
<div class="content auto">
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
</div>
<h2>noneのスクロールバー</h2>
<div class="content none">
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
<p>テキストテキストテキストテキスト...</p>
</div>
</body>
</html>メリットと注意点
メリット
実装が簡単
数行でスクロールバーをカスタマイズでき、手間をかけずにデザインを変更できます。
モダンなUIデザインにも対応可能
scrollbar-color,scrollbar-widthによって柔軟なデザインへの対応が可能なため、モダンなウェブサイトの構築に最適です。
注意点
ブラウザ間のデザインの差異
ブラウザによってスクロールバーのデザインが微妙に異なるため、統一した見た目を保証するのは難しい場合があります。
ブラウザの対応状況
scrollbar-widthはAndroid Browserではサポートされていません。また、scrollbar-colorはSafariおよび Android Browserでサポートされていないため、利用する際は注意が必要です
まとめ
scrollbar-colorとscrollbar-widthを活用することで、スクロールバーの色や太さをカスタマイズし、サイトのデザインに調和したUIを実現できます。少ないコードで簡単に実装できるのが大きなメリットです。ただし、ブラウザ間のデザイン差異や対応状況に注意して活用する必要があります。
参考文献
scrollbar-width – CSS: カスケーディングスタイルシート | MDN
scrollbar-color – CSS: カスケーディングスタイルシート | MDN
