IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

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

f:id:Surprisedblog:20210720221606p:plain

 

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

 

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

 

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

 

通常
通常のスクロール バーのデザインです。
矢印アイコンを変更する
矢印アイコンを指定したアイコン(FontAwesome)に変更しました。 マウスホバー時、クリック時にアイコンを変更することも可能です。
丸みのあるスクロール バー
スクロールバーのドラッグ部分、全体を丸くしました。
丸みを大きくしました。
色をアレンジしたスクロール バー
スクロールバーのドラッグ部分、全体のカラーを変更しました。
影、ボーダーを使用した一風変わったスクロールバーです。
ボーダー、グラデーションを使用した一風変わったスクロールバーです。
グラデーションのアニメーションはSVGで実現しています。
Safariでは動かない模様
背景パターンや模様のスクロールバー
ドット柄のスクロールバーです。
B`z柄(チェック柄)のスクロールバーです。
カーボンファイバーのようなスクロールバーです。
レンガ模様のスクロールバーです。
白黒チェックのスクロールバーです。
Safariのようなスクロール バー
スクロール バーのコンテナ部分を非表示にして、ドラッグ部分だけ表示しています。
床屋さんみたいなスクロールバー
個性的なスクロールバー
魚が泳ぐようなスクロールバーのデザインです。