まれに、スクロールバーのデザインがカスタマイズされているサイトがあり、羨ましいな（？）と思いましたので、カスタム方法を調べてまとめてみました。
目次（クリックでジャンプ）
【CSS】 Webkit疑似要素でスクロールバーをカスタマイズ
デザインは当記事のサムネイルのようなものになります。
各自デザインカスタムを行ってください。
そもそもWebkitとは
-webkit-というCSSコードを見たことはありませんか？
標準のCSSではなく、ブラウザ毎の独自のCSS拡張機能です。
CSSでは変更できない、スクロールバーや各種ボタン等のデザイン変更に対応するものが、Webkitです。
Webkitに対応していないブラウザもあります。
ですので今回のスクロールバーカスタマイズもブラウザによっては対応していない可能性もあります。
少なくとも、safari、Chrome等の主要ブラウザには対応しています。
-webkit-scrollbarの各プロパティの詳細
::-webkit-scrollbar : スクロールバー全体サイズ::-webkit-scrollbar-track : スクロールバー全体の背景::-webkit-scrollbar-thumb : スクロールバーのハンドル部分::-webkit-scrollbar-button : スクロールバー上下にある三角のボタン
その他
水平（横）スクロールバーのカスタマイズ例
CSSコード（SCSS）
body, html {
&::-webkit-scrollbar {
height: 15px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #00B7C3;//ここを好きな色に変えてね
border-radius: 10px;
}
&::-webkit-scrollbar-button {
display: none;
}
&::-webkit-scrollbar-track-piece:start,
&::-webkit-scrollbar-track-piece:end {
background-color: transparent;
}
}垂直（縦）スクロールバーのカスタマイズ
CSSコード（SCSS）
body, html {
&::-webkit-scrollbar {
width: 15px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: #00B7C3;//ここを好きな色に変えてね
border-radius: 10px;
}
&::-webkit-scrollbar-button {
display: none;
}
&::-webkit-scrollbar-track-piece:start,
&::-webkit-scrollbar-track-piece:end {
background-color: transparent;
}
}
