CSSでスクロール バーをカスタマイズして、カラフルなスクロールバーのデザインを作ってみました。svgを使用しているものもあり。

cssを使用していろいろなスクロール バーのデザインを作成してみました。
「::-webkit-scrollbar」をいじって、スクロール バーをカスタマイズしています。

種類ごとにスクロール バーを分けて、サンプルを表示しています。色、幅、透明度、素材をカスタマイズした様々なスクロール バーのデザインがあります。

cssコードは後々載せたいと思います。 

通常

通常のスクロール バーのデザインです。

矢印アイコンを変更する

矢印アイコンを指定したアイコン(FontAwesome)に変更しました。 マウスホバー時、クリック時にアイコンを変更することも可能です。

丸みのあるスクロール バー

スクロールバーのドラッグ部分、全体を丸くしました。

丸みを大きくしました。

色をアレンジしたスクロール バー

スクロールバーのドラッグ部分、全体のカラーを変更しました。

影、ボーダーを使用した一風変わったスクロールバーです。

ボーダー、グラデーションを使用した一風変わったスクロールバーです。
グラデーションのアニメーションはSVGで実現しています。
Safariでは動かない模様

背景パターンや模様のスクロールバー

ドット柄のスクロールバーです。

B`z柄（チェック柄）のスクロールバーです。

カーボンファイバーのようなスクロールバーです。

レンガ模様のスクロールバーです。

白黒チェックのスクロールバーです。

Safariのようなスクロール バー

スクロール バーのコンテナ部分を非表示にして、ドラッグ部分だけ表示しています。

床屋さんみたいなスクロールバー

個性的なスクロールバー

魚が泳ぐようなスクロールバーのデザインです。