web-dev-qa-db-ja.com

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でそれをしたいと思います。

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

cssfirefoxwebkitscrollbar
265
Dimitri Vorontzov

2018年末現在、Firefoxで利用できるカスタマイズは限られています。

これらの答えを見てください。

そして、これは背景情報です： https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

::-webkit-scrollbarやその仲間に相当するFirefoxはありません。

あなたはJavaScriptに固執する必要があります。

多くの人がこの機能を望んでいます。 https://bugzilla.mozilla.org/show_bug.cgi?id=77790

JavaScriptに代わるものとして、あなたは試すことができます：

206
thirtydot

代替品を提供してもいいですか。

スクリプトは一切含まれていません。標準化されたCSSスタイルとわずかな創造性のみが含まれています。簡単な答え - 既存のブラウザのスクロールバーの一部を隠します。つまり、そのすべての機能をそのまま使用できます。

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

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

jsfiddle.net/aj7bxtjz/1/ -

41
Tomaz

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

JQuery Custom Scrollbar を渡しました。それはかなり派手で、（スクロール慣性を使って）なめらかなスクロールをし、そしてあなたが微調整できるたくさんのパラメータを持っています、しかしそれは結局私には少しCPU集中的になりすぎました（そしてそれはDOMにかなりの量を加えます）。

今、私は Perfect Scrollbar goを出しています。それはシンプルで軽量（6KB）で、これまでのところまともな仕事をしています。それは（私が言うことができる限りでは）まったくCPU集中型ではなく、あなたのDOMにはほとんど加えません。 Tweak（wheelSpeedとwheelPropagation）には2、3のパラメータしかありませんが、必要なのはそれだけで、スクロールするコンテンツの更新をうまく処理します（画像のロードなど）。

P.S私はJScrollPaneをちょっと見てみましたが、@simoneは正しいです、今少し古くなっていてPITAです。

35
Markus Coetzee

Firefox 64ではスペックドラフト CSS Scrollbars Module Level 1 のサポートが追加されました。これは 2つの新しいプロパティ of scrollbar-width と scrollbar-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は現在、特定の長さの値をサポートしているようには見えません（ 彼らのバグトラッカーに関するこのコメントはthis を確認するようです）。ただし、thinキーワークはよくサポートされています。少なくとも。

おそらく、length valueオプションと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>
15
Alexander O'Mara

Firefox 64 以来、 新しいスペック を単純なScrollbarスタイルに使用することが可能です（ベンダの接頭辞を持つChromeほど完全ではありません）。

この例 では、FirefoxとChromeの両方に対処するために異なるルールを組み合わせて、同様の（等しくない）最終結果を出すソリューションを見ることができます（例は元の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でもスクロールバーの中の矢印を隠すためには、現在以下の規則でそれを "thin"として設定する必要がありますscrollbar-width: thin;

12
Luca Detomi

これはユーザースタイルで機能し、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/ を確認してください。

0
ipirlo
@-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;
    }
}
0
ramme