Chcem prispôsobiť posuvník pomocou CSS.
Používam tento kód WebKit CSS, ktorý funguje dobre pre Safari a Chrome:
::-webkit-scrollbar {
width: 15px;
height: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #C2D2E4;
}
::-webkit-scrollbar-thumb:vertical {
height: 30px;
background-color: #0A4C95;
}
Ako môžem urobiť to isté vo Firefoxe?
Viem, že to môžem ľahko urobiť pomocou jQuery, ale radšej by som to urobil pomocou čistého CSS, ak je to možné.
Budem vďačný za niekoho odbornú radu!
Od konca roka 2018 je teraz vo Firefoxe k dispozícii obmedzené prispôsobenie!
Pozrite si tieto odpovede:
A toto pre základné informácie: https://bugzilla.mozilla.org/show_bug.cgi?id=1460109
Vo Firefoxe neexistuje ekvivalent ::-webkit-scrollbar
a priateľov.
Budete musieť zostať pri JavaScripte.
Množstvo ľudí by túto funkciu chcelo, pozri: https://bugzilla.mozilla.org/show_bug.cgi?id=77790
Pokiaľ ide o náhrady JavaScriptu, môžete vyskúšať:
Myslel som, že sa podelím o svoje zistenia v prípade, že niekto uvažuje o zásuvnom module JQuery, ktorý by túto prácu vykonal.
Skúšal som JQuery Custom Scrollbar. Je to dosť efektné a robí to plynulé posúvanie (so zotrvačnosťou posúvania) a má veľa parametrov, ktoré môžete upraviť, ale nakoniec to bolo pre mňa príliš náročné na procesor (a pridáva to dosť veľa do DOM).
Teraz som skúsil Perfect Scrollbar. Je jednoduchý a ľahký (6 kB) a zatiaľ odvádza slušnú prácu. Nie je vôbec náročný na procesor (pokiaľ viem) a pridáva len veľmi málo do DOM. Má len pár parametrov na úpravu (wheelSpeed a wheelPropagation), ale to je všetko, čo potrebujem, a pekne zvláda aktualizácie rolovacieho obsahu (napríklad načítanie obrázkov).
P.S. Rýchlo som sa pozrel na JScrollPane, ale @simone má pravdu, je to už trochu zastarané a je to PITA.
Funguje to v používateľskom štýle a zdá sa, že to nefunguje na webových stránkach. Nenašiel som v tejto súvislosti oficiálne usmernenie od spoločnosti Mozilla. Aj keď to možno niekedy fungovalo, Firefox pre to nemá oficiálnu podporu. Táto chyba je stále otvorená 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;
}
Podrobnosti nájdete na stránke http://codemug.com/html/custom-scrollbars-using-css/.