Benutzerdefinierte CSS-Bildlaufleiste für Firefox

Ich möchte eine Bildlaufleiste mit CSS anpassen.

Ich verwende diesen WebKit-CSS-Code, der für Safari und Chrome gut funktioniert:

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

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

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

Wie kann ich dasselbe in Firefox tun?

Ich weiß, dass ich es einfach mit jQuery machen kann, aber ich würde es vorziehen, es mit reinem CSS zu machen, wenn es machbar ist.

Wäre dankbar für den kompetenten Rat von jemandem!

Ab Ende 2018 sind in Firefox nur begrenzte Anpassungsmöglichkeiten verfügbar!

Siehe diese Antworten:

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

Und das für Hintergrundinformationen: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

Es gibt kein Firefox-Äquivalent zu ::-webkit-scrollbar und Freunde.

Sie müssen sich an JavaScript halten.

Viele Leute möchten diese Funktion, siehe: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Bei JavaScript-Ersetzungen können Sie Folgendes versuchen:

• https://github.com/noraesae/perfect-scrollbar
• https://github.com/jnicol/trackpad-scroll-emulator
• https://github.com/vitch/jScrollPane (aber es ist veraltet und anscheinend eine PITA ...)

Firefox 64 bietet Unterstützung für den CSS-Bildlaufleistenmodul Level 1 der Spezifikation , der zwei neue Eigenschaften von hinzufügt scrollbar-widthund scrollbar-coloreine gewisse Kontrolle darüber gibt, wie Bildlaufleisten angezeigt werden.

Sie können scrollbar-coloreinen der folgenden Werte einstellen (Beschreibungen von MDN):

• auto Standard-Plattform-Rendering für den Spurabschnitt der Bildlaufleiste, sofern keine anderen zugehörigen Farbeigenschaften für die Bildlaufleiste vorhanden sind.
• dark Zeigen Sie eine dunkle Bildlaufleiste an, die entweder eine dunkle Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit dunklen Farben sein kann.
• light Zeigen Sie eine helle Bildlaufleiste an, die entweder eine leichte Variante der von der Plattform bereitgestellten Bildlaufleiste oder eine benutzerdefinierte Bildlaufleiste mit hellen Farben sein kann.
• <color> <color> Wendet die erste Farbe auf den Daumen der Bildlaufleiste an, die zweite auf die Spur der Bildlaufleiste.

Beachten Sie, dass darkund lightWerte derzeit nicht in Firefox implementiert sind .

macOS Hinweise:

Die automatisch ausgeblendeten halbtransparenten Bildlaufleisten, die die MacOS-Standardeinstellung sind, können mit dieser Regel nicht eingefärbt werden (sie wählen weiterhin ihre eigene Kontrastfarbe basierend auf dem Hintergrund). Nur die permanent angezeigten Bildlaufleisten (Systemeinstellungen> Bildlaufleisten anzeigen> Immer) sind farbig.

Visuelle Demo:

.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>

Sie können scrollbar-widtheinen der folgenden Werte einstellen (Beschreibungen von MDN):

• auto Die Standardbreite der Bildlaufleiste für die Plattform.
• thin Eine Variante mit geringer Breite der Bildlaufleisten auf Plattformen, die diese Option bieten, oder eine dünnere Bildlaufleiste als die Standardbreite der Bildlaufleistenplattform.
• none Es wird keine Bildlaufleiste angezeigt, das Element kann jedoch weiterhin gescrollt werden.

Sie können auch einen bestimmten Längenwert gemäß der Spezifikation festlegen. Beide thinund eine bestimmte Länge können möglicherweise nicht auf allen Plattformen etwas bewirken, und was genau dies tut, ist plattformspezifisch. Insbesondere scheint Firefox derzeit keinen bestimmten Längenwert zu unterstützen ( dieser Kommentar zu ihrem Bug-Tracker scheint dies zu bestätigen ). Dasthin Keywork scheint jedoch gut unterstützt zu sein, zumindest mit MacOS- und Windows-Unterstützung.

Es ist wahrscheinlich erwähnenswert, dass die Längenwertoption und die gesamte scrollbar-widthEigenschaft in einem zukünftigen Entwurf zum Entfernen in Betracht gezogen werden. In diesem Fall wird diese bestimmte Eigenschaft möglicherweise in einer zukünftigen Version aus Firefox entfernt.

Visuelle Demo:

.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>

Darf ich eine Alternative anbieten?

Kein Scripting, nur standardisierte CSS-Stile und ein bisschen Kreativität. Kurze Antwort - Maskieren von Teilen der vorhandenen Browser-Bildlaufleiste, dh Sie behalten alle Funktionen bei.

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

Eine Demo und eine etwas ausführlichere Erklärung finden Sie hier ...

jsfiddle.net/aj7bxtjz/1/

Ich dachte, ich würde meine Erkenntnisse teilen, falls jemand ein JQuery-Plugin in Betracht zieht, um die Arbeit zu erledigen.

Ich habe JQuery Custom Scrollbar gegeben . Es ist ziemlich ausgefallen und führt ein reibungsloses Scrollen (mit Scroll-Trägheit) durch und verfügt über eine Vielzahl von Parametern, die Sie anpassen können, aber es war für mich etwas zu CPU-intensiv (und es fügt dem DOM eine ganze Menge hinzu).

Jetzt probiere ich Perfect Scrollbar aus . Es ist einfach und leicht (6 KB) und macht bisher einen anständigen Job. Es ist überhaupt nicht CPU-intensiv (soweit ich das beurteilen kann) und fügt Ihrem DOM sehr wenig hinzu. Es müssen nur ein paar Parameter angepasst werden (WheelSpeed ​​und WheelPropagation), aber es ist alles, was ich brauche, und es behandelt Aktualisierungen des Bildlaufinhalts gut (z. B. das Laden von Bildern).

PS Ich habe mir JScrollPane kurz angesehen, aber @simone hat recht, es ist jetzt etwas veraltet und eine PITA.

Seit Firefox 64 können neue Spezifikationen für ein einfaches Scrollbar-Design verwendet werden ( nicht so vollständig wie in Chrome mit Herstellerpräfixen) ).

In diesem Beispiel sehen Sie eine Lösung, die verschiedene Regeln kombiniert, um sowohl Firefox als auch Chrome mit einem ähnlichen (nicht gleichen) Endergebnis zu adressieren (verwenden Sie beispielsweise Ihre ursprünglichen Chrome-Regeln):

Die wichtigsten Regeln sind:

Für Firefox

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

Für 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;
}

Bitte beachten Sie, dass in Bezug auf Ihre Lösung auch einfachere Chrome-Regeln wie die folgenden verwendet werden können:

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

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

Um Pfeile in Bildlaufleisten auch in Firefox auszublenden, ist es derzeit erforderlich, sie mit der folgenden Regel als " dünn " festzulegenscrollbar-width: thin;

Jahr 2020 funktioniert das

/* 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

Es funktioniert im Benutzerstil und scheint auf Webseiten nicht zu funktionieren. Ich habe keine offizielle Anweisung von Mozilla dazu gefunden. Obwohl es irgendwann funktioniert haben mag, hat Firefox keine offizielle Unterstützung dafür. Dieser Fehler ist noch offen 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;
}

Weitere Informationen finden Sie unter 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;
    }
}