CSSでのスクロールバーの装飾。
以前はchromeとあたりの対応だけだったのが、いつの間にかFirefoxも対応していたので今更感もありますがまとめておきます。
chrome・edge・safari
まずは手始めにchrome・edgeの方法をご紹介します。
See the Pen
Untitled by kkdd (@kk8kk)
on CodePen.
コードとしてはこんな感じです。注釈で書いてある通りですが
::-webkit-scrollbar
ここでスクロールバー全体の幅指定をしています。
::-webkit-scrollbar-track
ここでスクロールバーの背景についての指定をしています。
::-webkit-scrollbar-thumb
ここでスクロールバーのサム（前の方のバー）の指定をできます。
という感じになります。
もちろんですがFirefoxで見たときは反映されていないので、個別で登録します。
Firefox
Firefoxの場合はこんな感じの指定になります。chrome等用と比べるとシンプルですね。
See the Pen
Firefoxのスクロールバー by kkdd (@kk8kk)
on CodePen.
scrollbar-width
こちらで幅を指定します。thin を指定して今回は細目にしました。
他にはauto（いつものスクロールバーの幅）かnone（スクロールバーを全く表示しない）ぐらいしかないみたいです。
scrollbar-color
これでスクロールバーの色を指定します。
スクロールバーの前の方のバー、背景の順番で色を指定します。
Firefoxに自由度がないから指定はほどほどにした方がいいかも
Firefoxで装飾はできるようになりましたが、chromeなどのwebkit系と比べて自由度が少なめです。デザインの際はあまり違和感がないようにするのがベストだと思います。
