【CSS】スクロールバーをカスタマイズする方法

こんにちは、今回はCSSでブラウザのスクロールバーをカスタマイズする方法を紹介したいと思います。

以前「【CSS】スクロールバーを消す方法」という記事を書きましたが、今回はそれに続いた内容となっております。

まず初めに注意点として、ブラウザごとにカスタマイズの記述や可能な内容が異ります。ブラウザごとに簡単にカスタイズ可能な範囲を以下にまとめてみました。

・IE

色（スクロールバーの各パーツごと）

・Firefox

色（つまみ部分、トラック部分のみ）、大きさ（予め用意されている大きさのみ）

・Edge、Chrome、Safariなどのwebkit系ブラウザ

色（つまみ部分、トラック部分のみ）、大きさ（px指定可）、角丸などの装飾

webkit系ブラウザでは細かく指定できますが、それ以外のブラウザはかなり制限がある形になります。

それらを踏まえて各ブラウザで作成したDEMOをご覧ください。使用する色などは同じにして分かりやすくしてみました。

→DEMO

CSSのソースは以下をご覧ください。

指定方法自体は特に難しくも無いです。プロパティ名を見ればどこと対応しているか分かりやすいと思います。

webkit系ブラウザに関しては疑似要素で指定する形となります。どのプロパティを疑似要素で使えるのかまで詳しく調べていないので、そこは要検証ですね。少なくともホバー時に色を変えたり、border-radiusで角丸にはすることは可能でした。

再度DEMOのリンクを載せときます。

→DEMO

調べて使用してみた感想としては、webkit系ブラウザ以外は大したカスタマイズは出来ないなって感じですね。

IE、Firefoxは気にしないのであればCSSで普通にカスタマイズしてしまっていいと思います。

どうしてもどのブラウザでも同じ見た目にしたいのであれば、javascriptなどに頼るしか無さそうです。

以上、今回のクリエイターブログでした。