Firefox対応のスクロールバーデザイン指定 / スクロールバー前史

 

〔 注意 〕2024年6月
2024年現在のWindows11の環境では、このページのFirefoxのスクロールバーのアレンジコード（scrollbar-width等の指定）は無効です。
スクロールバーの幅などの指定は、現在はFirefoxのConfig指定を行うしか方法がみつかりません。 また、それはFirefoxのユーザー側の設定となり、ブログ等にFirefoxでアクセスして閲覧するユーザーへの対策にはなりません。

 

 

 

可能になったのは2020年後期 

最近、FirefoxでCSSによるスクロールバーアレンジが一部可能になった事に気付きました。 昨年あたりから、スクロールバーのデザインが微妙に変わったなぁとは思っていたのですが、アレンジは更に昔の2020年10月頃から可能だった様です。

 

Firefoxは私はメイン使用ではないので、どうしても気付くのが遅れますが、最近は初期画面のリンクが沢山設定できる様になり、ユーザーライクな改善を続けて頑張っています。

 

 

Edgeは MSニュースでトップを埋め、それはそれで便利な事もありますが、Firefoxのこの方針は大変に有難いものです。 やはり競争がより良い物を生みます。 ちょっと応援しなくてはなぁと思うところです。

 

 

 

常に問題になるスクロールバーデザイン 

私のブログを振り返ると、色々な場所でスクロールバーのデザインに苦心して来た事に気付きます。 Chrome（Edge）の場合は「::-webkit-」付きでしかCSS修飾ができませんが、ほぼ満足な指定が可能です。 これは、以下の記事で纏めています。

 

 

上の記事の 2018年の段階では、全く触れなかった Firefoxですが、現在は 配色と小幅が指定可能になりました。 それだけでもかなり前進です。

 

 

Firefoxのスクロールバー修飾 

配色は透過色の指定も可能で、移動タブ（scrollbar-thumb）の色と、スクロールバー軌道（scrollbar-track）の色が指定可能になりました。

 

指定パーツと修飾プロパティ

指定パーツ セレクタ プロパティ
スクロールバー（幅） 対象要素 scrollbar-width: thin
スクロールバー軌道（色） 対象要素 scrollbar-color: thumb track
移動タブ（色） 対象要素 scrollbar-color: thumb track

 

スクロールバー軌道（scrollbar-track）と 移動タブ（scrollbar-thumb）

 

▪指定は縦・横の区別がなく、対象要素のスクロールバー全体に指定されます。

▪「scrollbar-color」第1値で「thumb」、第2値で「track」の配色を指定します。 片側だけの指定はできない様です。

 

 

 Chromeと住み分け？

Firefoxの修飾可能な部分は Chromeに比べると控え目ですが、結果的に Firefoxの指定は独自の指定となり、Chromeの指定と並べて書いても競合しません。

 

〔追記〕2024.03

「scrollbar-width」の指定は Chromeの指定と競合しませんが、「scrollbar-color」は2024年の時点で Chromeの指定を無効にします。 従って、両ブラウザで指定を行うにはブラウザハックを使うしかない様です。

 

◎ Chromeの指定が反映するブラウザ

 

◎ Firefoxの指定が反映するブラウザ

 

 

 

私のページのCSS指定

私のブログページのブログスキンは、スクロールバーに関して以下の指定です。

 

/* スクロールバー ************************ */

/* アメブロヘッダーの右端切れを隠す */
#ambHeader {
    width: 100vw; }

.skin-columnB {
    overflow: overlay; }

/* スクロールバー幅指定（必須項目） */
.skin-columnB::-webkit-scrollbar {
    width: auto; }

/* スクロールバー軌道 */
.skin-columnB::-webkit-scrollbar-track {
    background: transparent; }

/* スクロールバー軌道のフォバー */
.skin-columnB::-webkit-scrollbar-track:hover {
    background: rgba(255, 255, 255, .3); }

/* 軌道のコーナー */
.skin-columnB::-webkit-scrollbar-corner {
    background: transparent; }

/* 縦スクロールボタンの上部ボタンを表示（透明）*/
.skin-columnB::-webkit-scrollbar-button:vertical:start:decrement {
    height: 49px; }

/* 縦移動タブ */
.skin-columnB::-webkit-scrollbar-thumb:vertical {
    background: rgba(45, 90, 100, .2); }

/* 横移動タブ */
.skin-columnB::-webkit-scrollbar-thumb:horizontal {
    background: transparent; }

/* 横移動タブのフォバー */
.skin-columnB::-webkit-scrollbar-thumb:horizontal:hover {
    background: rgba(45, 90, 100, .2); }


/* Firefox に対応した スクロールバーデザイン *** */
html {
  scrollbar-color: rgba(45, 90, 100, .2) #cfd6de;
  scrollbar-width: thin; }

 

 

◎ Chromeで参照した場合

 

◎ Firefoxで参照した場合

 

Chromeの指定は、アメブロヘッダーが縦スクロールバーにかからない様に小細工をしています。 Firefoxでそれに近いデザインは可能ですが、それは Chromeの指定を壊す結果になるので、簡単な指定に留めました。 結局、アメブロヘッダー上に縦スクロールバーが重なるので、スクロールバー幅を狭めています。