scrollbar-colorプロパティでスクロールバーの色を変える
scrollbar-colorプロパティを使うことで、スクロールバーの色を変更できる。
Safari TP 227でサポートされたので、近々全主要ブラウザで利用可能になりそうだ。
デフォルトのスクロールバーだと色が浮いてしまうようなリッチなWebデザインの場合でも、簡単にカスタマイズできるのでデザインの幅が広がりそう。ただし、ヤコブの法則（Jakob’s Law）にあるように「ユーザーは慣れ親しんだスタイルを他のサイトにも期待する」ので、あまりにも奇抜なスタイル変更は避けたほうがよいだろう。
.container {
/* User-Agentのスタイルが適用される*/
scrollbar-color: auto;
/* 1つ目:スクロールバーのつまみ、2つ目:スクロールバーのトラック */
scrollbar-color: #eee #333;
}- auto: デフォルトのスタイル、User-Agentやプラットフォームのスタイルが適用される
<color> <color>: スクロールバーのつまみとトラックの色を指定する
デモ
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.