【CSS】スクロールバーのカスタマイズ

  • 投稿日
  • 更新日
  • 著者 NKMR
  • カテゴリー CSS

スクロールバーのカスタマイズ方法をメモ。

【CSS】スクロールバーのカスタマイズ

前提として、webkit系のSafariとChrome限定のカスタマイズです。

body 全体のカスタムもできますが、::-webkit-scrollbar を特定のクラスの中に書くことで、そのクラスの中だけのスクロールバーをカスタマイズすることもできます。

主に使うであろうプロパティを抽出してご紹介。

/*スクロールバー全体*/
/*幅を指定することが多い*/
::-webkit-scrollbar {
  width: 10px; /*右のスクロールバーの幅*/
  height: 10px; /*下のスクロールバーの幅*/
}

/*スクロールバーの背景*/
/*背景色の設定に*/
/*透明度やグラデーションも設定できます*/
::-webkit-scrollbar-track {
  background-color: yellow;
}

/*スクロールバーの動くツマミ部分*/
/*ツマミの長さはコンテナの内容量によって可変します*/
::-webkit-scrollbar-thumb {
  background-color: red;
  border: 4px solid yellow;
}

注意点としては、ツマミ部分には横幅の指定はできません。

これにハマって時間を溶かしました汗

解決方法としては、↑にも記載がある ::-webkit-scrollbar-thumb に border を指定し、そのボーダーの色を ::-webkit-scrollbar-track で設定した背景色と同じ色を指定することでツマミの横幅を調整できます。

丸みを帯びたツマミにしたい場合は、ツマミに border-radius を指定し調整してください。

overflow でスクロール指定

スクロールさせるかどうかについてはその要素に overflow: scroll; を指定してあげればOK。

『縦のスクロールバーは表示させたいけど横はいらないな』って時は

.hoge {
  /*縦方向はスクロール可にする*/
  overflow-y: scroll;
  /*横方向はスクロール不可にする*/
  overflow-x: hidden;
}

のように適宜指定してあげてください。

TIPS 擬似要素系