CSSでスクロールバーのデザイン変更

overflow-xやoverflow-xなどでスクロールできるようにした時のスクロールバーをCSSでカスタマイズする方法を記載します。

自分自身コーディングしていてスクロールバーを変更したい場面に遭遇したとき難しいだろうなと感じましたが、コード自体は難しくないものの、絶対に後になって忘れると思い記事を書くことにしました。

幅・高さを調整 ::webkit-scrollbar

<div class="scroll">
...
</div>

.scroll {
  overflow-x: scroll;
}

.scroll::webkit-scrollbar {
  overflow-x: scroll;
  height: 6px;
  width: 100px;
}

::webkit-scrollbar という擬似要素を記述するとスクロールバーの幅・高さを変更することが可能です。

実際に動く部分の調整 ::-webkit-scrollbar-thumb

.scroll {
  overflow-x: scroll;
}

.scroll::-webkit-scrollbar-thumb {
 background-color: red;
 border-radius: 10px;
}

::webkit-scrollbar-thumb を記述することで動く部分の色などの装飾を当てることが可能。

動かない全体の部分を調整 ::-webkit-scrollbar-track

.scroll {
  overflow-x: scroll;
}

.scroll::-webkit-scrollbar-track {
 background-color: #ccc;
}

動く部分を除いたスクロールバー全体のスタイルを調整する時は::-webkit-scrollbar-track で可能です。

注意点

MDNを見るとFireFoxとios12.2までは未対応になってます。

ios12はほとんど見ることはないと思うので問題ないと思いますが、FireFoxに対応していないところは頭の中に入れておく必要はありますね。

詳しくはこちらのMDNでご覧ください。

まとめ

• ::webkit-scrollbar はサイズ調整
• ::-webkit-scrollbar-track で全体の調整
• ::webkit-scrollbar-thumb　で動く部分の調整
• FireFoxでは未対応

使う機会があったら参考までに。