Benutzerdefinierte CSS-Bildlaufleiste für Firefox

Ich möchte eine Bildlaufleiste mit CSS anpassen.

Ich verwende diesen WebKit-CSS-Code, der gut für Safari und Chrome 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 das Gleiche in Firefox erreichen?

Ich weiß, ich kann leicht tun es mit jQuery, aber ich würde es vorziehen, mit reinen CSS zu tun, wenn es machbar ist.

Wäre dankbar für jemand's Experten Rat!

Community
Bearbeitete Frage 12. Juli 2018 в 12:00
Programmierung
firefox css webkit scrollbar
29. Mai 2011 в 1:44
18 Aufrufe
Lösung

Seit Ende 2018 sind in Firefox nur noch begrenzte Anpassungen möglich!

Siehe diese Antworten:

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

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

Sie müssen sich an JavaScript halten.

Viele Leute würden diese Funktion gerne haben, siehe: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Was die Ersetzung von JavaScript betrifft, so können Sie es versuchen:

thirtydot
Bearbeitete Antwort 9. Januar 2019 в 4:56
Kommentare (17)

Ich dachte, ich würde meine Erkenntnisse teilen, falls jemand erwägt, ein JQuery-Plugin, um die Arbeit zu tun.

Ich gab [JQuery Custom Scrollbar] (http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html) ein gehen. Es ist ziemlich schick und macht einige glatte Scrollen (mit Scrolling Trägheit) und hat viele Parameter, die Sie zwicken können, aber es endete ein bisschen zu CPU-intensiv für mich (und es fügt eine ganze Menge, um die DOM).

Jetzt versuche ich es mit Perfect Scrollbar. Es ist einfach und leichtgewichtig (6KB) und es macht bisher einen guten Job. Es ist überhaupt nicht CPU-intensiv (soweit ich das beurteilen kann) und fügt nur sehr wenig zu Ihrem DOM hinzu. Es hat nur ein paar Parameter zu zwicken (wheelSpeed und wheelPropagation), aber es ist alles, was ich brauche, und es behandelt Updates auf den scrollenden Inhalt schön (wie das Laden von Bildern).

P.S. Ich habe einen kurzen Blick auf JScrollPane, aber @simone ist richtig, es ist ein bisschen veraltet jetzt und eine PITA.

Matthew
Bearbeitete Antwort 30. Oktober 2017 в 6:21
Kommentare (4)

Es funktioniert im Benutzerstil, und es scheint in Webseiten nicht zu funktionieren. Ich habe keine offizielle Anweisung von Mozilla zu diesem Thema gefunden. Es kann sein, dass es irgendwann einmal funktioniert hat, aber Firefox hat 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;
}

siehe http://codemug.com/html/custom-scrollbars-using-css/ für Details.

Adrian Rodriguez
Bearbeitete Antwort 29. Mai 2014 в 8:41
Kommentare (5)