scrollbar-color CSS property
Baseline 2025
Neu verfügbar
Seit Dezember 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die CSS-Eigenschaft scrollbar-color legt die Farben der Bildlaufleistenspur und des Schiebereglers fest.
Die Spur ist der Hintergrund der Bildlaufleiste. Sie bleibt in der Regel unabhängig von der Scrollposition unverändert.
Der Schieberegler ist der bewegliche Teil der Bildlaufleiste, der sich normalerweise über der Spur befindet.
Wird scrollbar-color auf dem Wurzelelement des Dokuments gesetzt, gelten die Werte für die Bildlaufleisten des Viewports.
Hinweis:
Browser ignorieren die nicht standardisierte Familie der ::-webkit-scrollbar-Pseudoelemente bei jedem Element, dessen berechneter Wert für scrollbar-color nicht auto ist.
Da scrollbar-color vererbt wird, betrifft dies auch Elemente, die die Eigenschaft nicht selbst setzen, sondern einen anderen Wert als auto von einem Vorfahren erben.
Wenn Sie für ein solches Element scrollbar-color: auto festlegen, wird dessen ::-webkit-scrollbar-*-Styling wiederhergestellt, falls es zuvor durch eine scrollbar-color-Einstellung eines Vorfahren außer Kraft gesetzt wurde.
Siehe Fallback für Bildlaufleisten-Stile hinzufügen.
Syntax
/* Keyword value */
scrollbar-color: auto;
/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */
/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;
Werte
<scrollbar-color>-
Definiert die Farbe der Bildlaufleiste.
autoStandarddarstellung der Bildlaufleistenspur durch die Plattform, sofern keine anderen relevanten Eigenschaften für die Farbe der Bildlaufleiste festgelegt sind. <color> <color>Wendet die erste Farbe auf den Schieberegler der Bildlaufleiste und die zweite auf die Bildlaufleistenspur an.
Hinweis:
@media (forced-colors: active) setzt scrollbar-color auf auto.
Barrierefreiheit
Wenn Sie die Eigenschaft scrollbar-color mit konkreten Farbwerten verwenden, sollten Sie sicherstellen, dass die festgelegten Farben einen ausreichenden Kontrast zueinander aufweisen. Bei Schlüsselwortwerten sollten User-Agents sicherstellen, dass die verwendeten Farben einen ausreichenden Kontrast aufweisen. Siehe Techniken für WCAG 2.0: G183: Verwendung eines Kontrastverhältnisses von 3:1.
Formale Definition
| Anfangswert | auto |
|---|---|
| Anwendbar auf | scrollende Boxen |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
scrollbar-color =
auto |
<color>{2}
Beispiele
Bildlaufleisten bei überlaufendem Inhalt einfärben
HTML
<div class="scroller">
Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
earthnut pea peanut soko zucchini.
</div>
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |