CSS-Scrollbar-Generator
Scrollleisten gestalten: Breite, Farben, Radius und Hover für Chrome, Safari, Edge und Firefox – für Seite oder Element.
Der CSS-Scrollbar-Generator gestaltet Scrollleisten für die ganze Seite oder ein einzelnes Element. Du stellst Breite, Spur- und Daumenfarbe, Hover-Farbe, Radius und Innenabstand ein. Der Code kombiniert ::-webkit-scrollbar für Chrome, Edge und Safari mit scrollbar-color und scrollbar-width für Firefox, ohne dass sich beide gegenseitig aushebeln.
.scroll-box::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.scroll-box::-webkit-scrollbar-track {
background: #f1f5f9;
}
.scroll-box::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 8px;
border: 3px solid #f1f5f9;
}
.scroll-box::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.scroll-box::-webkit-scrollbar-corner {
background: #f1f5f9;
}
/* Firefox (und Browser ohne ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
.scroll-box {
scrollbar-width: thin;
scrollbar-color: #94a3b8 #f1f5f9;
}
}Scrollbars in allen Browsern gestalten
Für Scrollleisten gibt es zwei Ansätze, die sich nicht vertragen: die alten ::-webkit-scrollbar-Pseudo-Elemente mit voller Gestaltungsfreiheit und die
standardisierten Eigenschaften scrollbar-color und scrollbar-width mit wenigen Optionen.
| Browser | Methode im Code | Möglich |
|---|---|---|
| Chrome, Edge, Opera | ::-webkit-scrollbar | Breite, Farben, Radius, Hover |
| Safari | ::-webkit-scrollbar | Breite, Farben, Radius, Hover |
| Firefox | scrollbar-color, scrollbar-width | Farben, schmal oder normal |
Auf macOS und mobilen Geräten blendet das System Scrollleisten oft aus, bis gescrollt wird. Passende Farben für Spur und Daumen findest du im Farbpaletten-Generator.
Häufige Fragen
Warum steckt scrollbar-color in @supports?
Chrome und Edge unterstützen seit Version 121 auch scrollbar-color und scrollbar-width. Sobald eine dieser Eigenschaften gesetzt ist, ignorieren sie ::-webkit-scrollbar komplett, also auch Breite und Radius. Die @supports-Abfrage setzt die Standard-Eigenschaften nur in Browsern ohne ::-webkit-scrollbar, vor allem in Firefox.
Kann ich in Firefox Radius und genaue Breite einstellen?
Nein. Firefox kennt nur scrollbar-width (auto, thin oder none) und scrollbar-color für Daumen und Spur. Form und Hover-Farbe bestimmt der Browser.
Wie entsteht der Abstand um den Daumen?
Der Daumen bekommt einen Rahmen in der Farbe der Spur. Dadurch wirkt er schmaler und schwebt mit etwas Luft in der Spur.
Sollte ich Scrollbars ausblenden?
Meist nicht. Die Scrollleiste zeigt, dass weiterer Inhalt folgt und wie lang die Seite ist. Wer sie ausblendet, sollte das nur bei Elementen tun, die eindeutig scrollbar wirken, etwa Karussells mit Pfeilen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.