Der Scrollbalken des Browsers ist standardmäßig schlicht und passt sich nicht ans eigene Design an. Mit dem Pseudo-Element ::-webkit-scrollbar lässt sich das ändern – Farbe, Breite, abgerundete Ecken und mehr sind damit möglich. Die Unterstützung ist in Chromium-basierten Browsern (Chrome, Edge, Opera) und Safari sehr gut. Firefox hat seit Version 64 eine eigene, vereinfachte Variante über scrollbar-color und scrollbar-width.
Die Abschnitte auf dieser Seite: Aufbau der Pseudo-Elemente, Ein komplettes Beispiel, Firefox – die Alternative, Nur einen Bereich stylen.
Aufbau der Pseudo-Elemente
Der Scrollbalken besteht aus mehreren Teilen, die du einzeln ansprechen kannst:
::-webkit-scrollbar– der Scrollbalken selbst, hier steuerst du vor allem die Breite.::-webkit-scrollbar-track– die Schiene, auf der sich der Balken bewegt.::-webkit-scrollbar-thumb– der greifbare Balken, den der Nutzer zieht.::-webkit-scrollbar-thumb:hover– der Balken im Hover-Zustand.
Ein komplettes Beispiel
/* Breite des gesamten Scrollbalkens */
::-webkit-scrollbar {
width: 8px;
}
/* Die Schiene im Hintergrund */
::-webkit-scrollbar-track {
background: #f5f5f5;
}
/* Der Balken selbst */
::-webkit-scrollbar-thumb {
background: #0094ff;
border-radius: 10px;
}
/* Balken beim Hovern */
::-webkit-scrollbar-thumb:hover {
background: #40fe2a;
}
Das Ergebnis ist ein schmaler, blauer Scrollbalken mit abgerundeten Ecken – beim Drüberfahren wechselt er die Farbe. Der border-radius auf dem thumb sorgt für die weiche Form, funktioniert aber nur wenn der Balken schmaler als die Schiene ist.
Firefox – die Alternative
Firefox unterstützt ::-webkit-scrollbar nicht, hat aber seit Version 64 zwei eigene Eigenschaften. Die Gestaltungsmöglichkeiten sind deutlich eingeschränkter – Breite und Farbe, mehr nicht:
/* Nur für Firefox */
* {
scrollbar-color: #0094ff #f5f5f5; /* thumb track */
scrollbar-width: thin; /* auto | thin | none */
}
Willst du beide Browser abdecken, kombinierst du einfach beide Ansätze – sie stören sich nicht gegenseitig. Firefox ignoriert die ::-webkit-scrollbar-Regeln, Chromium ignoriert scrollbar-color sobald du ::-webkit-scrollbar definiert hast.
Nur einen Bereich stylen
Du musst den Scrollbalken nicht global für die gesamte Seite anpassen. Wenn du ::-webkit-scrollbar an einen bestimmten Selektor hängst, gilt das Styling nur für scrollbare Bereiche innerhalb dieses Elements:
.code-block::-webkit-scrollbar {
height: 6px; /* horizontal – daher height statt width */
}
.code-block::-webkit-scrollbar-track {
background: #1e1e1e;
}
.code-block::-webkit-scrollbar-thumb {
background: #0094ff;
border-radius: 10px;
}
Für horizontale Scrollbalken – zum Beispiel bei Codeblöcken – verwendest du height statt width im ::-webkit-scrollbar-Block. Das ist ein häufiger Stolperstein.