CSS-schuifbalkgenerator

Moderne standaardeigenschappen (2023 en later)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Browserondersteuning (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Reserveert de ruimte voor de schuifbalk ook wanneer die niet nodig is en voorkomt zo layoutverschuiving.

Webkit-pseudo-elementen (Chrome, Safari, oudere Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Fijnere controle. width stelt de breedte van de verticale schuifbalk in; height stelt de hoogte van de horizontale in. Voeg beide toe voor containers die in beide richtingen kunnen scrollen.

Cascadeer de twee benaderingen

Geef eerst de moderne regels op en daarna webkit als verbetering voor browsers die beide weergeven:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox volgt alleen de moderne scrollbar-*-regels. Chrome en Safari volgen de webkit-regels (die de moderne overschrijven, zodat het gedrag consistent blijft).

scrollbar-gutter voorkomt verschuiving van inhoud

Zonder gereserveerde ruimte herschikt de inhoud zich wanneer een schuifbalk verschijnt (gebruikelijk bij dynamische lijsten). Oplossing:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

De plek van de schuifbalk wordt gereserveerd, of de inhoud nu scrollt of niet. both-edges voegt aan de tegenoverliggende kant een gelijke ruimte toe zodat de inhoud visueel gecentreerd blijft.

Schuifbalken volledig verbergen

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Wees voorzichtig: door de schuifbalk te verbergen zien gebruikers niet meer dat de inhoud scrollbaar is. Gebruik dit alleen met een duidelijke indicator (pijlen, paginastippen) of wanneer het scrollgedrag duidelijk is uit de context (horizontale carrousels, chatgeschiedenissen).

Aandachtspunten voor mobiel

Op iOS en Android verschijnen schuifbalken alleen kort tijdens het scrollen. Je aangepaste schuifbalk-CSS wordt nog steeds toegepast, maar gebruikers zien die misschien nooit langer dan een seconde. Ontwerp daarnaar: investeer niet te veel in visuele franje die zelden zichtbaar is.

Toegankelijkheid

• Contrast: de schuifknop ten opzichte van de baan moet 3:1 halen voor niet-tekstueel contrast (WCAG 1.4.11).
• Breedte: dunne schuifbalken kunnen moeilijk met de muis te pakken zijn, vooral voor gebruikers met motorische beperkingen. Een normale breedte is een veiligere standaard.
• Verwijder de schuifbalk nooit in schuifbare gebieden zonder een andere manier van scrollen aan te bieden. Gebruikers die afhankelijk zijn van de schuifbalk lopen anders vast.