Benutzerdefinierte CSS-Bildlaufleiste für Firefox

313

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!

Dimitri Vorontzov
quelle
1
Bitte teilen Sie uns mit, wie Sie dies mit jQuery tun können. Ich bin mit dem gleichen Problem konfrontiert, habe aber CSS verwendet, um es für Webkit zu beheben. Firefox stellt jedoch ein Problem dar, bei dem Ihre jQuery-Lösung möglicherweise helfen kann.
iGbanam
1
Ich empfehle die Verwendung des jscrollpane jQuery-Plugins.
Dimitri Vorontzov
Es gibt ein Problem mit jScrollPane in Firefox. jScrollPane funktioniert perfekt in Chrome, aber in Firefox haben Sie ein leeres System rechts neben der jScrollPane-Bildlaufleiste Bildlaufleiste. Es sollte nur eine Bildlaufleiste geben
iGbanam
1
Nicht wahr. Wenn Sie das haben, haben Sie irgendwo etwas falsch gemacht.
Dimitri Vorontzov

Antworten:

239

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

Siehe diese Antworten:

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:

dreißig Punkte
quelle
2
Vielen Dank, ThirtyDot. Eine Frage: Was ist mit -moz-Erscheinungsbild: scrollbartrack-vertikal - und anderen verwandten CSS-Erweiterungen? Vielleicht können sie auf irgendeine Weise verwendet werden?
Dimitri Vorontzov
2
Leider kann keiner der möglichen Werte für -moz-appearancehelfen. "The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme."- Sie erhalten nur eine native Bildlaufleiste.
30.
15
Nur für den Fall, dass jemand, der dies liest, eine praktische Lösung benötigt, habe ich das jscrollpane jQuery-Plugin verwendet.
Dimitri Vorontzov
1
@ JacquesMathieu, ich verstehe was du meinst. Obwohl dies nicht Barons Schuld ist, tritt der Fehler immer noch auf, wenn ich die Seite herunterlade und die Initialisierung von Baron verhindere. Es sieht also so aus, als wäre Chrome hier schuld.
Thephpdev
3
Drafts.csswg.org/css-scrollbars-1 ist der erste Start der Spezifikation, ist jedoch in Firefox Nightly standardmäßig aktiviert.
Wegry
53

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:

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:

Alexander O'Mara
quelle
Danke für diese Antwort. Ich habe meine akzeptierte Antwort aktualisiert, um diese (und die andere relevante Antwort) zu bewerben, damit die Leute sie eher sehen.
dreißig Punkte
1
Dies entspricht im Wesentlichen Lucas Antwort von drei Wochen zuvor.
Josh Habdas
@JoshHabdas Diese Antwort enthält nicht annähernd so viele Kompatibilitäts- oder Verwendungsinformationen. Ich habe diese Antwort erstellt, weil die andere Antwort nicht die wichtigen Informationen enthielt, nach denen ich gesucht habe.
Alexander O'Mara
1
Sie können ihnen Anerkennung zollen, Feedback vorschlagen oder ihre Antwort bearbeiten.
Josh Habdas
2
@JoshHabdas Nun, 5 Leute fanden es bereits nützlich und es enthält Informationen, die nirgendwo anders im Web zu finden sind, also bin ich anderer Meinung.
Alexander O'Mara
43

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/

Tomaz
quelle
7
Dies beantwortet die Frage leider nicht. Dimitri versucht, die Bildlaufleiste zu formatieren, nicht auszublenden.
stvnrynlds
14
Das war vor 4 Jahren (das ist mir bewusst), also bin ich mir sicher, dass er schon etwas getan hat. Das Thema ist jedoch auch heute noch relevant - während andere Browser eine "illegale" Änderung von Bildlaufleisten zulassen, ist dies bei FF nicht der Fall. Aus diesem Grund habe ich beschlossen, es zu veröffentlichen. Und das Front-End-Ergebnis ist das visuelle Gestalten der Bildlaufleiste, unabhängig davon, dass die Art und Weise, wie dies getan wird, einen Teil davon verbirgt.
Tomaz
Ich liebe diese Lösung, abgesehen von all dem zusätzlichen Markup mit absoluter Positionierung (macht Sachen mit variabler Größe zu einem Albtraum) und du kannst den Stil nicht wirklich ändern, du maskierst / versteckst einfach Elemente des vorhandenen Scrollers - schade, wenn ich einen grünen Balken will!
RozzA
3
Ja, nach vier Jahren geht es nicht mehr darum, die Frage des OP zu beantworten, sondern vielmehr darum, einen Beitrag zur Gemeinschaft zu leisten.
tmthyjames
3
Das Wesentliche des Problems ist, dass die von einigen Rendering-Engines bereitgestellten Lösungen nicht dem Standard entsprechen. Dies ist die Frage, die meine Bedenken am besten anspricht, und dies ist die Antwort, nach der ich gescrollt habe.
Filip Dupanović
36

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.

Markus Coetzee
quelle
3
Es gibt auch einen Trackpad-Scroll-Emulator - das verwendet twitch.tv.
Forivall
1
Perfect Scrollbar ist eigentlich wirklich gut. Nachdem ich viele andere Möglichkeiten ausgeschöpft hatte, fand ich es die beste Lösung. Danke, dass du es vorgeschlagen hast.
Leonard Teo
nanoScroller ist auch sehr gut und relativ schlank. jamesflorentino.github.io/nanoScrollerJS Im Gegensatz zu den umfangreichen JS-Plugins verbirgt dieses einfach den nativen Scroller und zeigt einen alternativen Scroller mit dem nativen 'scroll'-Ereignis
Danny R
1
Ich habe alle jquery-Lösungen vermieden, da sie alle auf langsameren Maschinen oder Maschinen unter Stress
zurückbleiben
31

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;

Luca Detomi
quelle
1
Es sieht so aus, als hätte IE 5.5 doch etwas richtig gemacht. :)
Josh Habdas
5

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

Mensch
quelle
Gute Nachrichten, aber wie können wir den Umriss ändern?
AbeIsWatching
0

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

ipirlo
quelle
2
Ich habe versucht, wie Sie geschrieben haben, aber es funktioniert nicht für meine in FF. Überprüfen Sie die jsfiddle.net/gGbkY/1 Fehlt mir etwas?
Satinder singh
Es funktioniert im Benutzerstil und scheint auf Webseiten nicht zu funktionieren. Ich habe keine offizielle Anweisung von Mozilla dazu gefunden.
Ipirlo
1
Bitte überprüfen Sie den gleichen Link: Es funktioniert nicht mehr
Krunal Shah
3
Was ist der Benutzerstil?
Marecky
Der von Ihnen verlinkte Fehler wurde vor 17 Jahren gemeldet und wurde noch nicht zugewiesen. Ich denke, man kann mit Sicherheit sagen, dass FF das Ausblenden nativer Bildlaufleisten niemals unterstützen wird.
Sterling Bourne
-2
@-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;
    }
}
ramme
quelle
5
Sie haben einen Code-Blob mit wenigen bis gar keinen Informationen bereitgestellt, die beschreiben, was er tut oder wie er es tut.
Josh Habdas