Aangepaste CSS Scrollbar voor Firefox

Ik wil een scrollbar aanpassen met CSS.

Ik gebruik deze WebKit CSS code, die goed werkt voor Safari en Chrome:

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

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

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

Hoe kan ik hetzelfde doen in Firefox?

Ik weet dat ik het gemakkelijk kan doen met behulp van jQuery, maar ik zou het liever doen met pure CSS als het's te doen is.

Zou dankbaar zijn voor iemand's deskundig advies!

Community
Bewerkte vraag 12de3 juli 2018 в 12:00
Programmering
firefox css webkit scrollbar
29ste6 mei 2011 в 1:44
8 views
Oplossing

Vanaf eind 2018 is er nu beperkte aanpassing beschikbaar in Firefox!

Zie deze antwoorden:

En dit voor achtergrondinformatie: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109

Er'is geen Firefox equivalent voor ::-webkit-scrollbar en vrienden.

Je zult het bij JavaScript moeten houden.

Veel mensen zouden deze functie willen, zie: https://bugzilla.mozilla.org/show_bug.cgi?id=77790

Wat JavaScript vervangers betreft, kun je proberen:

thirtydot
Bewerkt antwoord 9de2 januari 2019 в 4:56
Commentaren (17)

Ik dacht dat ik zou mijn bevindingen te delen in het geval iemand overweegt een JQuery plugin om het werk te doen.

Ik gaf JQuery Custom Scrollbar een go. Het's vrij fancy en doet een aantal soepele scrollen (met scrollen inertie) en heeft tal van parameters die u kunt tweaken, maar het eindigde een beetje te CPU-intensief voor mij (en het voegt een behoorlijke hoeveelheid aan de DOM).

Nu geef ik Perfect Scrollbar een kans. Het is eenvoudig en licht (6KB) en het doet zijn werk tot nu toe behoorlijk. Het is helemaal niet CPU-intensief (voor zover ik kan nagaan) en voegt heel weinig toe aan je DOM. Het's heeft slechts een paar parameters te tweaken (wheelSpeed en wheelPropagation), maar het's alles wat ik nodig heb en het behandelt updates aan de scrollende inhoud mooi (zoals het laden van afbeeldingen).

P.S. Ik heb even gekeken naar JScrollPane, maar @simone heeft gelijk, het'is een beetje gedateerd nu en een PITA.

Matthew
Bewerkt antwoord 30ste0 oktober 2017 в 6:21
Commentaren (4)

Het werkt in gebruikersstijlen, en het lijkt niet te werken in webpagina's. Ik heb hierover geen officiële aanwijzingen van Mozilla gevonden. Hoewel het misschien ooit heeft gewerkt, heeft Firefox hier geen officiële ondersteuning voor. Deze bug staat nog open 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;
}

kijk op http://codemug.com/html/custom-scrollbars-using-css/ voor details.

Adrian Rodriguez
Bewerkt antwoord 29ste3 mei 2014 в 8:41
Commentaren (5)