2020年のスクロールバー関連 CSS 事情 (Chrome・Firefox・iOS)

IE 時代にスクロールバーの色を変えて遊んでいたのが懐かしい…。

目次

Chrome 向け・スクロールバーのスタイリング方法

Chrome では以下の擬似要素でスタイリングできる。

主に使うのは ::-webkit-scrollbar-track と ::-webkit-scrollbar-thumb かな。width で縦スクロールバーの幅、height で横スクロールバーの高さを指定し、background でスクロールバーの色を変更できる。

border-radius なども効くので、角丸で半透明なスクロールバーも作れたりする。

Firefox 向け・スクロールバーのスタイリング方法

Firefox では ::-webkit-scrollbar 系が効かない。overflow: scroll などを適用している要素に、次のプロパティを指定することでスタイリングできる。

scrollbar-color はスペース区切りで2つの色名を指定する。

textarea {
  scrollbar-color: red blue;
}

このようにすると、スクロールバー自体が赤色、スクロールバーが配置される領域の背景色が青色となる。rgba など、半透明な色も選べる。

scrollbar-width は auto か thin くらいしか指定できない。thin にするとスクロールバーが細くなる。

iOS Safari はスクロールバーのスタイリングができなくなった

iOS 13 あたりからスクロールバーのスタイリングができなくなったらしい。残念。

CodePen のエディタ部分などを見ると、独自のスタイルが適用されたスクロールバーが見えているのだが、コレはどうも JavaScript で自前のスクロールバーを実装しているようだ。

スタイリングのサンプル

というワケで、それぞれの CSS プロパティでどういう風にスタイリングされるのか、サンプルを見ていただこう。

iOS でイマイチスタイリングできないし、Firefox でスクロールバーを指定してもちょっとイマイチなところもあるので、スクロールバーのスタイリングはあまり頑張らないようにしておこう。

参考文献