Benutzerdefinierte CSS-Scrollbar für den Firefox
Möchte ich anpassen, scrollbar mit CSS.
Ich dieses WebKit-CSS-code, die gut funktioniert für Safari und Chrome:
::-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?
Ich weiß, ich kann einfach tun, es mit Hilfe von jQuery, aber ich würde es bevorzugen, tun Sie es mit reinem CSS, wenn es machbar.
Wäre dankbar für jemanden, der kompetente Beratung!
Bitte teilen, wie Sie es tun können, mithilfe von jQuery. Ich bin konfrontiert mit dem gleichen problem, aber verwendet CSS, um es zu beheben für Webkit. Aber Firefox stellt ein problem dar, dass Ihr jQuery-Lösung kann in der Lage sein, mit zu helfen.
Ich empfehle, mit jscrollpane jQuery-plugin.
Es ist ein Problem mit jScrollPane im Firefox. jScrollPane funktioniert einwandfrei in Chrome, aber in Firefox, Sie haben eine leere system scrollbar rechts neben der jScrollPane scrollbar. Sollte es nur eine scrollbar
Nicht wahr. Wenn Sie haben, dass Sie etwas falsch gemacht irgendwo.
Siehe meine Antwort hier: stackoverflow.com/questions/7357203/custom-scrollbars/...
Ich empfehle, mit jscrollpane jQuery-plugin.
Es ist ein Problem mit jScrollPane im Firefox. jScrollPane funktioniert einwandfrei in Chrome, aber in Firefox, Sie haben eine leere system scrollbar rechts neben der jScrollPane scrollbar. Sollte es nur eine scrollbar
Nicht wahr. Wenn Sie haben, dass Sie etwas falsch gemacht irgendwo.
Siehe meine Antwort hier: stackoverflow.com/questions/7357203/custom-scrollbars/...
InformationsquelleAutor Dimitri Vorontzov | 2011-05-29
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ab Ende 2018, es gibt jetzt eingeschränkte Anpassungsmöglichkeiten im Firefox!!!
Sehen diese Antworten:
Und diese für die hintergrund-info: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Es gibt keine Firefox-equivalent zu::-webkit-scrollbar
und Freunde.Sie haben zu stick mit JavaScript.Viele Menschen würden gerne dieses feature finden Sie unter: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
So weit als JavaScript-Ersatz gehen, können Sie Folgendes versuchen:
Nein. Leider, keine der möglichen Werte für
-moz-appearance
helfen können."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 scrollbar.Nur falls jemand dies Lesen, braucht eine praktische Lösung, landete ich mit jscrollpane jQuery-plugin.
Ich sehe, was du meinst. Aber das ist nicht der Baron Schuld, wenn ich die Seite herunterzuladen und zu verhindern, baron von der Initialisierung, der Fehler immer noch Auftritt. So sieht es aus wie Chrome es Unrecht.
drafts.csswg.org/css-scrollbars-1 ist die Phase 1 start der spec, aber es ist aktiviert in Firefox Nightly jetzt aus der box standardmäßig.
InformationsquelleAutor thirtydot
Kann ich eine alternative anbieten?
Kein Skripting überhaupt, nur standardisierte css-styles und ein wenig Kreativität. Kurze Antwort - maskieren der Teile des bestehenden browser-scrollbar, das heißt, Sie behalten alle, es ist Funktionalität.
Für demo-und ein bisschen mehr in-depth-Erklärung, schauen Sie hier...
jsfiddle.net/aj7bxtjz/1/
Das war vor 4 Jahren (ich bin mir bewusst, dass ich bin sicher, dass er schon etwas getan, jetzt. Aber das Thema ist auch heute noch relevant - während andere Browser zulassen, die irgendeine Art von "illegalen" änderung des Scroll-leisten, FF nicht. Das ist, warum ich beschlossen, um es zu veröffentlichen.Und die front-end-Ergebnis ist optisch scrollbar-styling, unabhängig von der Tatsache, dass die Art und Weise, es zu tun ist ausblenden ein Teil davon.
ich Liebe diese Lösung, außer für alle, die das zusätzliche markup mit einer absoluten Positionierung (ist-variable Größe-Sachen ein Alptraum) plus Sie können tatsächlich ändern Sie den Stil, Sie sind einfach maskieren/verbergen Elemente der bestehenden scroller - zu schlecht, wenn ich wollen einen grünen Balken!
ja, nach vier Jahren, es geht nicht um die Beantwortung der OP Frage, so viel wie es ist ein Beitrag an die Gemeinschaft.
Der Kern des Problems ist, dass die Lösungen, die von manchen rendering-engines sind nicht-standard. Dies ist die Frage, die besten Adressen mein Anliegen und dies ist die Antwort, die ich war scrollen.
InformationsquelleAutor Tomaz
Ich dachte, ich würde teilen meine Ergebnisse, falls jemand erwägt, ein JQuery-plugin, um die Arbeit zu tun.
Gab ich JQuery Custom Scrollbar ein zu gehen. Es ist ziemlich fancy und hat einige smooth-scrolling (scrollen mit Trägheit) und hat jede Menge Parameter, die Sie einstellen können, aber es endete als etwas zu CPU-intensiv für mich (und es fügt eine Menge, um den DOM).
Nun gebe ich Perfekte Scrollbar ein zu gehen. Es ist einfach und leicht (6KB) und es macht einen ordentlichen job bisher. Es ist nicht CPU intensiv sind (soweit ich das sagen kann) und fügt sehr wenig, um Ihren DOM. Es ist nur noch ein paar Parameter zu optimieren (Rad-Geschwindigkeit und wheelPropagation), aber es ist alles was ich brauche und es verarbeitet Aktualisierungen der bildlaufinhalt schön (wie das laden von Bildern).
P. S. ich habe einen kurzen Blick auf die JScrollPane, aber @simone hat Recht, es ist ein bisschen veraltet jetzt, und ein PITA.
Perfekte Scrollbar ist eigentlich wirklich gut. Nach anstrengenden viele andere Möglichkeiten, ich fand es die beste Lösung zu sein. Dank für die Annahme.
nanoScroller ist auch wirklich gut, und relativ schlank. jamesflorentino.github.io/nanoScrollerJS im Gegensatz zu der schwere JS-plugins, das man versteckt sich einfach die native scroller, und zeigt eine Alternative scroller mit den native 'scroll' - Ereignis
ich habe die Vermeidung aller der jquery-Lösungen, da Sie alle lag auf langsameren Maschinen oder für Maschinen, die unter stress, aber in PS sieht aus wie ein Gewinner
InformationsquelleAutor Markus Coetzee
Seit Firefox 64, ist möglich, neue specs für eine einfache Scrollbar-styling (nicht so vollständig wie in Chrome mit vendor-Präfixen).
In dieses Beispiel ist möglich, um zu sehen, eine Lösung zu kombinieren, die unterschiedliche Regeln für den Umgang mit Firefox und Chrome mit einem ähnlich (nicht gleich) Endergebnis (Beispiel verwenden Sie Ihre original-Chrom-Regeln):
Die wichtigsten Regeln sind:
Für Firefox
Für Chrome
Bitte beachten Sie, dass hinsichtlich Ihrer Lösung möglich ist auch einfacher Chrom-Regeln wie die folgenden:
Schließlich, um sich zu verstecken Pfeile in Scrollbalken auch im Firefox, die derzeit notwendig ist, um es als "dünne" mit der folgenden Regel
scrollbar-width: thin;
InformationsquelleAutor Luca Detomi
Es funktioniert im Benutzer-Stil, und es scheint nicht zu funktionieren in web-Seiten. Ich habe nicht gefunden, offiziellen Richtung von Mozilla. Während es möglicherweise gearbeitet haben, an einem gewissen Punkt, Firefox keine offizielle Unterstützung für diese. Dieser bug ist noch offen https://bugzilla.mozilla.org/show_bug.cgi?id=77790
überprüfen http://codemug.com/html/custom-scrollbars-using-css/ für details.
Es funktioniert im Benutzer-Stil, und es scheint nicht zu funktionieren in web-Seiten. Ich habe nicht gefunden, offiziellen Richtung von Mozilla.
bitte überprüfen Sie aus dem gleichen link: es funktioniert nicht mehr
Was ist die Benutzer-style?
Den Fehler, den Sie verlinkt wurde berichtet, vor 17 Jahren, und immer noch nicht zugeordnet werden konnten. Ich denke, es ist sicher zu sagen, die FF wird nie Unterstützung das Versteck von native scrollbars.
InformationsquelleAutor ipirlo
InformationsquelleAutor ramme