スクロールバーのデザインカスタマイズ

｜2024/10/05
アイキャッチ

Chrome や Firefox では CSS でスクロールバーのデザインを自由に変えることができて、当ブログではシンプルで細めのデザインにしています。昔は IE でも弄れたらしいですね。

全ての環境で統一したデザインで見てもらえるのがベストですけど、とりあえず一部の環境向けにでも自分好みのデザインに変えてみてはどうでしょう。

Chrome と Firefox 比較

Chrome と Firefox では以下のように仕様が異なります。

Chrome

  • ページ内全てのスクロールバーをいっぺんに変えられる。ブラウザのウィンドウの右や下側のスクロールバーにも適用可能。
  • 各パーツの色や形等、細かいデザイン調整が可能。

Firefox

  • ブラウザウィンドウのスクロールバーには適用できない。 ※出来ます。↓の追記を御覧ください。
  • 色は自由に変えられるものの、それ以外は幅を細くすることしかできない。

ということで、Chrome の自由度が高いですね。

chrome スクロールバー
Firefox スクロールバー
※変えられることが判明しました(追記参照)

CSS

Chrome はセレクタの前に ID, クラスを付けると、その部分だけに適用できます。何も付けないと全てのスクロールバーに適用されます。

例:
.hljs::-webkit-scrollbar

/*Chrome*/
::-webkit-scrollbar {/*スクロールバーの幅*/
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {/*スクロールバーの軌道*/
    background: lemonchiffon;
}
::-webkit-scrollbar-thumb {/*つまみの部分*/
    box-shadow: inset 0 0 10px orange;
    border-radius: 10px;
    background: yellow;
}
::-webkit-scrollbar-thumb:hover {/*マウスホバー時*/
    background: gold;
}
/*Firefox*/
@-moz-document url-prefix() {
  .hljs {/*適用させる箇所のID, クラスに置き換えてください*/
      scrollbar-width: thin;/*太さ(幅・高さ両方に適用)*/
      scrollbar-color: #ffa500 #fffacd;/*つまみの色 軌道の色*/
  }
}

参考

ファビコンmdn web docs
サムネイル
CSS スクロールバー - CSS: カスケーディングスタイルシート | MDN
CSS スクロールバー (CSS Scrollbars) は、 2000 年に Windows の IE 5.5 で導入され、廃止されたスクロールバーの色のプロパティを標準化するためのものです。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Scrollbars

追記: Firefox ウィンドウのスクロールバーデザインも変更可能に

いつの間にか仕様が変わったようで、Firefox でもブラウザウィンドウのスクロールバーのデザインが変えられることがわかりました。

以下のように記述するだけでウィンドウも含めたページ全体のスクロールバーのデザインを一括で変更できます。
セレクタを「html」にしてもいけそうですが、当ブログでは hilight.js のスクロールバーの細さが変わりませんでした。

2024/05/17 追記

v121から Chromium の仕様が変わったため、これまで Firefox でのみサポートされていた CSS(scrollbar-width, scrollbar-color) が Chrome や Edge にも適用されてしまうようになったようです。
というわけで Firefox のみに適用させるためのハックで@-moz-document url-prefix()を追加しました。

@-moz-document url-prefix() {/*Firefoxのみに適用*/
  * {
      scrollbar-width: thin;/*太さ*/
      scrollbar-color: #ffa500 #fffacd;/*つまみの色 軌道の色*/
  }
}