CSS Scrollbar Generator

Scrollbars i Chrome, Safari og Edge-stil med ::-webkit-scrollbar-familien af pseudo-elementer: separate regler for sporet, tommelfingeren og tommelfingerens svævetilstand, plus en pixel-nøjagtig bredde og en tommelfingerkant-radius. Firefox ignorerer alt dette fuldstændigt og læser i stedet to standardegenskaber, rullebjælke-bredde og rullebjælke-farve, som senere kom ind i CSS-rullebjælker-specifikationen. Disse er ikke to dialekter af samme funktion - de er to forskellige funktionssæt med forskellige lofter, og de fleste rullebjælke-generatorer papirer stille over hullet ved kun at vise WebKit-resultatet. Det gør denne ikke.

Indstil bredden, sporfarven, tommelfingerfarven, svævefarven og tommelfingerhjørneradius én gang, og værktøjet bygger to regelsæt ud fra de samme input. WebKit-blokken omfatter ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb og dens :hover-tilstand til venstre demoboks, så det, du ser der, er præcis, hvad Chrome, Safari og Edge gengiver - browserens egen rigtige motor, ikke en simuleret overlejring. Firefox-blokken indstiller rullebjælkebredde og rullebjælkefarve på den højre demoboks ved hjælp af den samme browsers egen motor, hvorfor boksen kun ser anderledes ud, når denne side faktisk er åben i Firefox; i en WebKit-browser viser den sin egen standardrullelinje der, og værktøjet siger det i stedet for at forfalske et Firefox-look med lånte pixels.

Breddekortlægningen er det tydeligste eksempel på kløften: Firefox's rullebjælkebredde accepterer kun nøgleordene auto, tynd eller ingen - aldrig et nøjagtigt pixeltal. Denne generator kortlægger din valgte bredde ærligt (8px og derunder bliver tynd, alt bredere bliver automatisk) og viser det resulterende søgeord ved siden af ​​dit input, i stedet for at opfinde et falsk pixel-perfekt Firefox-resultat, der ikke eksisterer. Firefox har heller ingen mulighed for at indstille en separat svævefarve, en uafhængig tommelfingerkant-radius eller en sporfarve, der ikke blot er den anden værdi af scrollbar-farve - disse er permanente, reelle begrænsninger af platformen, ikke udeladelser i dette værktøj.

Kopier den kombinerede CSS-blok, og begge regelsæt rejser sammen, hver under deres egen kommentar, klar til at indsætte i et stylesheet, som det er. Alt gengives og opdateres i din egen browser, mens du trækker i kontrollerne - ingen upload, ingen konto, ingen server tur-retur, og det bliver ved med at fungere offline, når siden er indlæst.