webkit系ブラウザのSafariとChromeは、CSSプロパティの::-webkit-scrollbarでスクロールバーの見た目をカスタマイズできます。
デモページはこちら
ただしwebkit系ブラウザではないfirefoxやIEには適用されません。
scssでサイト全体に適用する場合は以下のように記述します。
::-webkit-scrollbar {
//縦スクロールに適用
width: 6px;
//横スクロールに適用
height: 6px;
//ドラッグ可能なスクロールハンドル部分
&-track {
border-radius: 3px;
background: #d3d3d3;
}
//スクロールバーの背景
&-thumb {
border-radius: 3px;
background: #6c6c6c;
}
}
特定のクラスに適用する場合は以下のように記述します。
.box::-webkit-scrollbar {
width: 6px;
height: 6px;
&-track {
border-radius: 3px;
background: #d3d3d3;
}
&-thumb {
border-radius: 3px;
background: #6c6c6c;
}
}





