[css]スクロールバーのデザインを変更する

最近youtubeも変えてきたね。

使用箇所
組み込み
対Firefox
対InternetExplorer（ie11）

使用箇所

ブラウザ上の全てのスクロールバーのデザインを変えられる。
ブラウザ毎にというかOS毎にというかそういう意味でのデフォルトでそれぞれデザインが違うんで、統一してやろうってのもできる。

何より嬉しいのはoverflow-y:auto;とかで、コンテンツ内に表示されるスクロールバーのデザインが変えられること。ぶっといのが入ってくるとそれだけで台無しになるし。

それをやっていく。

まあ、webkit限定だけどね。

組み込み

例えばこんな感じ。

::-webkit-scrollbar{
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track{
    background: #eee;
}
::-webkit-scrollbar-thumb{
    background: #ccc;
    border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover{
    background: #aaa;
}

一個で済まないのがめんどいですね。
とりあえずこれはスクロールバーだけ表示する内容で、両端の矢印ボタンを付けたかったら「::-webkit-scrollbar-button」とか、他にも色々やれる。その色々をまとめてるサイトがあるので、色入やりたいなら検索かけてみるといいかも。まー、シンプルにしたいってのが多数派だろうし、そんなに色々付けることはないと思う。

スクロールバーをデザインする::-webkit-scrollbarに関しての覚え書き

Webkit系ブラウザで利用できる::-webkit-scrollbar擬似要素に関する覚え書きです。スクロールバーをデザインするときに使います。

で、paddingとかopactyとか使えないやつがあるんで気をつける。:hoverは使えるからマウスオーバー時にだけ表示したいみたいなおしゃれさんは背景色とbackgroundを同色にすればいいですね。実用性考えたら最初から見えてるほうがいいけどね。

transitionが使えないのがなぁ。

対Firefox

firefoxは-webkit-では戦えないので別のアプローチが必要になる。firefoxでスクロールバーを変更する方法はざっくり2つ、jsでデフォルトのスクロールバーを削除して代替を表示するか、cssでやるか。そう、cssでやれるんだけど上記のやつとは方法が違う。

【親要素】{
    scrollbar-width: thin; //幅、高さ共通
    scrollbar-color: #222 #1a1a1a; //ドラッグ部位、スクロール領域背景
}

-moz-じゃないのが意外。

指定できるのはこの2つ。角丸とかにはできないね。カーソルを乗せた際に勝手に色が変わるけど:hoverで指定できるのでフォローは可能。詳細は賢いサイトを見たほうがいい。

scrollbar-width - CSS: カスケーディングスタイルシート | MDN

scrollbar-width プロパティは、要素のスクロールバーが表示される時の最大の太さを設定することができます。

scrollbar-color - CSS: カスケーディングスタイルシート | MDN

scrollbar-color は CSS のプロパティで、スクロールバーのトラックとつまみの色を設定します。

現状、自分としては必要十分だけど自由度が低いってのと、やっぱり他のブラウザと足並みが揃わないのは気持ち悪いですね。幅を実数で指定できないのがほんと。

対InternetExplorer（ie11）

ついでだから調べたけど、先に結論として、打つ手がない。
色しか変えられない。

対応策はあるんだけど、しかもそれは全環境に対応するらしいんだけど、動作に納得してないので最適解とは言えない。それはjsでの装飾という手段。いくつかある。

【全ブラウザ対応】perfect-scrollbar.jsでスクロールバーの色をCSSで自由に変更する。 | web(K)campus|WEBデザイナーのための技術系メモサイト

WEBデザイナーのつくるデザインって基本的にブラウザからキャプチャ取ってきたスクロールバーが使われるんですけど、グラフィックデザイナーよりの人がつくるWEBデザインってスクロールバーもご丁寧にサイトカラーに合わせた色合いになってる事があるん...

fleXcroll | Webサイト制作支援 | ShanaBrian Website

CSSでデザイン可能なオリジナルスクロールバー「fleXcroll」の使用方法を紹介・掲載しているページです。

ホイールでスクロールしたらカクカクするのが気に食わないので、だったらIEは諦めて、ブレがあってもCSSでいいかなって。