6XC

CSS Scrollbar Generator

Ontwerp een aangepaste gekleurde scrollbar met live voorbeeld en kopieer de CSS — compatibel met WebKit en Firefox.

735 weergaven

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Dit gebied is bedoeld om uw aangepaste scrollbar te testen. Scroll naar beneden en bekijk hoe de balk rechts uw ontwerp volgt. Wijzig kleuren en afmetingen; het resultaat wordt direct op dit vak toegepast.

Hoe Worden Scrollbars gestyled met CSS?

Er zijn twee mechanismen: WebKit-browsers (Chrome, Edge, Safari) gebruiken de ::-webkit-scrollbar pseudo-elementfamilie, waarmee u track, thumb, breedte en radius kunt stylen; Firefox gebruikt de eenvoudigere standaardeigenschappen scrollbar-color en scrollbar-width. De gegenereerde code bevat beide, zodat uw scrollbar er overal consistent uitziet.

Pas kleuren, breedte en radius aan; het voorbeeldvenster rechts scrolt met uw toegepaste ontwerp, en de CSS wordt direct bijgewerkt.

Veelgestelde vragen

Waarom ziet mijn scrollbar er anders uit in Firefox?

Firefox negeert ::-webkit-scrollbar-regels en houdt alleen rekening met scrollbar-color (thumb- en trackkleuren) en scrollbar-width. Radius en hover-effecten zijn exclusief voor WebKit; Firefox toont een vereenvoudigde versie.

Kan ik de scrollbar van slechts één element stylen?

Ja — bepaal de scope van de selectors: .mijn-vak::-webkit-scrollbar { … } en .mijn-vak { scrollbar-color: … }. Pas het toe op html of body (of gebruik de kale selectors van deze generator) voor de hele pagina.

Werken aangepaste scrollbars op mobiel?

Meestal niet: iOS en de meeste Android-browsers gebruiken overlay-scrollbars die deze stijlen negeren. Beschouw aangepaste scrollbars als een verbetering voor desktop.

Vergelijkbare tools

CSS Kleurverloop Generator Ontwerp lineaire, radiale en conische CSS-kleurverlopen met live voorbeeld en kopieer de code. Genereren CSS Box Shadow Generator Ontwerp een box-shadow visueel — verschuiving, vervaging, spreiding, kleur, dekking en inset — met live preview. Genereren CSS Border-Radius Generator Rond elke hoek afzonderlijk of allemaal tegelijk af, in px of %, met live voorbeeld en kopieerbare CSS. Genereren CSS Tekstschaduw Generator Ontwerp een text-shadow met verschuiving, vervaging, kleur en dekking — live voorbeeld op voorbeeldtekst. Genereren