⭐ 0
🔍
Tekst Afbeelding PDF & Documenten Audio Muziek Elektronica Tijd Hulpprogramma's Validators Esoterie Spellen

CSS-scrollbalkgenerator

Stel de breedte, track, thumb en hoverkleur van een scrollbalk in en zie het échte WebKit-resultaat naast het échte Firefox-resultaat — twee echt verschillende browsersystemen, naast elkaar.

🔒 Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.

10px
8px

Opgemaakt met ::-webkit-scrollbar pseudo-elementen — dit vak wordt weergegeven via de echte engine van uw browser, of dit nu Chrome, Safari of Edge is.

Opgemaakt met de schuifbalkbreedte- en schuifbalkkleureigenschappen van Firefox. Andere browsers negeren deze en tonen hier hun eigen standaardschuifbalk. Open deze pagina in Firefox om het echte resultaat te zien.

Firefox heeft geen aparte hoverkleur, duimrandradius of onafhankelijke trackstijl – alleen de breedte van de schuifbalk, hier in kaart gebracht van de door u gekozen dikte tot het echte trefwoord: thin

Verwerken... 0%

Resultaat

Chrome, Safari en Edge stylen scrollbalken met de ::-webkit-scrollbar-familie van pseudo-elementen: aparte regels voor de track, de thumb en de hoverstatus van de thumb, plus een exacte pixelbreedte en een thumb-border-radius. Firefox negeert dat allemaal volledig en leest in plaats daarvan twee standaardeigenschappen, scrollbar-width en scrollbar-color, die later in de CSS Scrollbars-specificatie zijn opgenomen. Dit zijn geen twee dialecten van dezelfde functie — het zijn twee verschillende functiesets met verschillende plafonds, en de meeste scrollbalkgeneratoren poetsen het verschil stilletjes weg door alleen het WebKit-resultaat te laten zien. Deze niet.

Stel eenmalig de breedte, trackkleur, thumb-kleur, hoverkleur en thumb-corner-radius in, en de tool bouwt twee regelsets op basis van dezelfde invoer. Het WebKit-blok scoped ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb en zijn :hover-status naar de linker demo-box, dus wat je daar ziet is precies wat Chrome, Safari en Edge weergeven — de eigen echte engine van de browser, geen gesimuleerde overlay. Het Firefox-blok zet scrollbar-width en scrollbar-color op de rechter demo-box met diezelfde browser-eigen engine, en daarom ziet die box er alleen anders uit als deze pagina daadwerkelijk in Firefox is geopend; in een WebKit-browser toont hij daar zijn eigen standaardscrollbalk, en de tool zegt dat ook in plaats van een Firefox-look te faken met geleende pixels.

De breedtekoppeling is het duidelijkste voorbeeld van de kloof: Firefox' scrollbar-width accepteert alleen de keywords auto, thin of none — nooit een exact pixelgetal. Deze generator koppelt je gekozen breedte eerlijk (8px en minder wordt thin, alles breder wordt auto) en toont het resulterende keyword naast je invoer, in plaats van een nep pixel-perfect Firefox-resultaat te verzinnen dat niet bestaat. Firefox heeft ook geen manier om een aparte hoverkleur, een onafhankelijke thumb-border-radius of een trackkleur in te stellen die niet simpelweg de tweede waarde van scrollbar-color is — dit zijn blijvende, echte beperkingen van het platform, geen omissies in deze tool.

Kopieer het gecombineerde CSS-blok en beide regelsets gaan samen mee, elk onder hun eigen commentaar, klaar om zo in een stylesheet te plakken. Alles wordt gerenderd en bijgewerkt in je eigen browser terwijl je de schuifregelaars bedient — geen upload, geen account, geen server-round-trip, en het blijft offline werken zodra de pagina is geladen.

Geniet je van dit hulpmiddel? Denkt u dat dit product nuttig is? Zie je er potentieel in en wil je het ondersteunen?

🛡️
Uitgevoerd in browser

Uw bestanden en invoer verlaten dit apparaat nooit. Verwerking verloopt volledig offline. 100% veilig.

Geaccepteerde formaten & regels

  • Gedeelde bedieningselementen — breedte, trackkleur, thumb-kleur, hoverkleur, thumb-corner-radius — sturen beide engines aan vanuit dezelfde invoer.
  • Eerlijke scrollbar-width-koppeling: Firefox ondersteunt alleen thin, auto of none, dus de exacte pixelwaarde die je kiest wordt afgebeeld op het dichtstbijzijnde echte keyword en naast je invoer getoond.
  • Gecombineerde, kopieerbare CSS-output met zowel de WebKit-pseudo-elementregels als de standaard Firefox-eigenschappen, helder becommentarieerd.

Belangrijkste voordelen

✓ Twee live demo-boxen laten de eigen scrollbalk van elke engine zien — de WebKit-box toont altijd het échte resultaat in Chrome, Safari en Edge, zonder namaakweergave.
✓ De beperkingen van Firefox worden niet verborgen, maar getoond: hoverkleur, thumb-radius en onafhankelijke track-styling bestaan simpelweg niet in Firefox, en de tool zegt dat eerlijk in plaats van te doen alsof.
✓ Eén kopieerbare CSS-blok bundelt beide regelsets samen met een fallback-commentaar, klaar om zo te plakken.

Toepassingen

  • • Stijl de schuifbalk van een dashboardzijbalk in het merkkleurenpalet en zie meteen hoe ver die opmaak reikt in Firefox voordat je deze uitrolt.
  • • Pak het eerlijke Firefox-sleutelwoord voor schuifbalkbreedte voor een gekozen dikte, in plaats van te gokken of 'thin' of 'auto' het dichtst in de buurt komt.
  • • Kopieer één CSS-blok dat zowel de WebKit-pseudo-elementregels als de standaard Firefox-eigenschappen bevat, elk helder becommentarieerd, rechtstreeks in een stylesheet.