Firefox用のカスタムCSSスクロールバー

CSSでスクロールバーをカスタマイズしたい。

私はこのWebKit CSSコードを使用します。これはSafariとChromeでうまく機能します。

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

Firefoxで同じことをするにはどうすればよいですか？

jQueryを使用して簡単に実行できることはわかっていますが、実行可能な場合は純粋なCSSで実行することをお勧めします。

誰かの専門家のアドバイスに感謝します！

2018年後半の時点で、Firefoxで利用できるカスタマイズが制限されています！

これらの回答を参照してください：

• https://stackoverflow.com/a/54101063/405015
• https://stackoverflow.com/a/53739309/405015

そして、これは背景情報のために：https：//bugzilla.mozilla.org/show_bug.cgi？id = 1460109

::-webkit-scrollbarと同等のFirefoxはありません。

JavaScriptを使用する必要があります。

多くの人がこの機能を望んでいます。https：//bugzilla.mozilla.org/show_bug.cgi？id = 77790をご覧ください。

JavaScriptの置き換えに関する限り、次のことを試すことができます。

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane（しかし、それは時代遅れであり、どうやらPITA ...）

Firefox 64は、仕様ドラフトCSS Scrollbars Module Level 1のサポートを追加します。これにより、およびの2つの新しいプロパティが追加されますscrollbar-widthscrollbar-colorスクロールバーの表示方法をある程度制御を与えます。

scrollbar-color次の値のいずれかに設定できます（MDNからの説明）。

• auto 他の関連するスクロールバーの色プロパティがない場合の、スクロールバーのトラック部分のデフォルトのプラットフォームレンダリング。
• dark 暗いスクロールバーを表示します。これは、プラットフォームによって提供されるスクロールバーの暗いバリアント、または暗い色のカスタムスクロールバーのいずれかです。
• light 明るいスクロールバーを表示します。これは、プラットフォームによって提供されるスクロールバーの明るいバリアント、または明るい色のカスタムスクロールバーのいずれかです。
• <color> <color> 最初の色をスクロールバーのつまみに、2番目の色をスクロールバーのトラックに適用します。

darkとlight値に注意してください現在はFirefoxに実装されていません。

macOSノート：

macOSのデフォルトである自動非表示の半透明のスクロールバーは、このルールでは色付けできません（背景に基づいて独自の対照的な色を選択します）。常に表示されているスクロールバー（[システム環境設定]> [スクロールバーを表示]> [常に]）のみが着色されます。

ビジュアルデモ：

.scroll {
  width: 20%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-color-auto {
  scrollbar-color: auto;
}
.scroll-color-dark {
  scrollbar-color: dark;
}
.scroll-color-light {
  scrollbar-color: light;
}
.scroll-color-colors {
  scrollbar-color: orange lightyellow;
}

<div class="scroll scroll-color-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-color-dark">
<p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p><p>dark</p>
</div>

<div class="scroll scroll-color-light">
<p>light</p><p>light</p><p>light</p><p>light</p><p>light</p><p>light</p>
</div>

<div class="scroll scroll-color-colors">
<p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p><p>colors</p>
</div>

scrollbar-width次の値のいずれかに設定できます（MDNからの説明）。

• auto プラットフォームのデフォルトのスクロールバー幅。
• thin そのオプションを提供するプラットフォーム上の薄いスクロールバー幅バリアント、またはデフォルトのプラットフォームのスクロールバー幅より薄いスクロールバー。
• none スクロールバーは表示されませんが、要素は引き続きスクロール可能です。

仕様に従って、特定の長さの値を設定することもできます。両方thinと特定の長さは、すべてのプラットフォームで何も実行しない場合があり、正確に何をするかはプラットフォーム固有です。特に、Firefoxは現在、特定の長さの値をサポートしていないようです（バグトラッカーのこのコメントはこれを確認しているようです））。thinkeyworkは、-以上のMacOSとWindowsのサポートで、しかしよくサポートされるように見えるん。

長さの値のオプションと全体が scrollbar-widthプロパティが将来のドラフトでの削除が検討されているその場合、この特定のプロパティは将来のバージョンでFirefoxから削除される可能性があります。

ビジュアルデモ：

.scroll {
  width: 30%;
  height: 100px;
  border: 1px solid grey;
  overflow: scroll;
  display: inline-block;
}
.scroll-width-auto {
  scrollbar-width: auto;
}
.scroll-width-thin {
  scrollbar-width: thin;
}
.scroll-width-none {
  scrollbar-width: none;
}

<div class="scroll scroll-width-auto">
<p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p><p>auto</p>
</div>

<div class="scroll scroll-width-thin">
<p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p><p>thin</p>
</div>

<div class="scroll scroll-width-none">
<p>none</p><p>none</p><p>none</p><p>none</p><p>none</p><p>none</p>
</div>

代替品を提供できますか？

スクリプティングは一切なく、標準化されたcssスタイルと少しの創造性のみです。短い答え-既存のブラウザのスクロールバーの一部をマスクします。つまり、すべての機能を保持します。

.scroll_content {
    position: relative;
    width: 400px;
    height: 414px;
    top: -17px;
    padding: 20px 10px 20px 10px;
    overflow-y: auto;
}

デモともう少し詳しい説明については、ここをチェックしてください...

jsfiddle.net/aj7bxtjz/1/

誰かがJQueryプラグインで仕事をすることを検討している場合に備えて、私の調査結果を共有したいと思いました。

私はJQueryカスタムスクロールバーを与えました行きます。それはかなり空想的で、スムーズなスクロール（スクロールの慣性による）を実行し、調整可能なパラメーターの負荷がありますが、私にとってはCPUに負荷がかかりすぎています（そしてDOMにかなりの量が追加されます）。

これで、Perfect Scrollbarを使用できるようになりました。シンプルで軽量（6KB）で、これまでのところかなりの仕事をしています。（私が知る限り）CPUに負荷をかけず、DOMにほとんど追加しません。微調整するパラメーターは2つ（wheelSpeedとwheelPropagation）しかありませんが、必要なのはこれだけであり、スクロールするコンテンツの更新（画像の読み込みなど）を適切に処理します。

PS私はJScrollPaneをざっと見てみましたが、@ simoneは正しいです。今は少し日付があり、PITAです。

Firefox 64以降、単純なスクロールバーのスタイル設定に新しい仕様を使用することができます（ベンダーの接頭辞付きのChromeほど完全ではありません）。

では、この例と同様の（等しくない）、最終的な結果（例えば、あなたのオリジナルのクロームのルールを使用）とアドレスのFirefoxとChromeの両方に異なるルールを組み合わせたソリューションを参照することが可能です。

主なルールは次のとおりです。

Firefoxの場合

.scroller {
  overflow-y: scroll;
  scrollbar-color: #0A4C95 #C2D2E4;
}

Chromeの場合

.scroller::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.scroller::-webkit-scrollbar-track-piece  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb:vertical {
    height: 30px;
    background-color: #0A4C95;
}

ソリューションに関しては、次のように、より単純なChromeルールを使用することもできます。

.scroller::-webkit-scrollbar-track  {
    background-color: #C2D2E4;
}

.scroller::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #0A4C95;
}

最後に、Firefoxでもスクロールバーの矢印を非表示にするには、現在、次のルールで「細い」に設定する必要があります。scrollbar-width: thin;

2020年これはうまくいく

/* Thin Scrollbar */
:root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
}

https://github.com/Aris-t2/CustomCSSforFx/issues/160

ユーザースタイルで機能し、Webページでは機能しないようです。私はこれに関してMozillaからの公式の指示を見つけていません。ある時点で機能した可能性がありますが、Firefoxはこれを公式にサポートしていません。このバグはまだ開いていますhttps://bugzilla.mozilla.org/show_bug.cgi?id=77790

scrollbar {
/*  clear useragent default style*/
   -moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
   -moz-appearance: none !important;
}
/* the sliding part*/
thumb{
   -moz-appearance: none !important;
}
scrollcorner {
   -moz-appearance: none !important;
   resize:both;
}
/* vertical or horizontal */
scrollbar[orient="vertical"] {
    color:silver;
}

詳細については、http：//codemug.com/html/custom-scrollbars-using-css/を確認してください。

@-moz-document url-prefix(http://),url-prefix(https://) {
    scrollbar {
       -moz-appearance: none !important;
       background: rgb(0,255,0) !important;
    }
    thumb,scrollbarbutton {
       -moz-appearance: none !important;
       background-color: rgb(0,0,255) !important;
    }

    thumb:hover,scrollbarbutton:hover {
       -moz-appearance: none !important;
       background-color: rgb(255,0,0) !important;
    }
    scrollbarbutton {
       display: none !important;
    }
    scrollbar[orient="vertical"] {
      min-width: 15px !important;
    }
}