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 Farbe der Scrollleisten-Spur und des Scrollleisten-Reglers fest.
Die Spur bezieht sich auf den Hintergrund der Scrollleiste, der im Allgemeinen unabhängig von der Scrollposition fest bleibt.
Der Regler bezieht sich auf den beweglichen Teil der Scrollleiste, der normalerweise über der Spur schwebt.
Wenn der Wert von scrollbar-color auf dem Wurzelelement des Dokuments gesetzt wird, werden die Werte auf die Scrollleisten des Viewports angewendet.
Hinweis:
Browser ignorieren die nicht standardisierte Familie von Pseudoelementen ::-webkit-scrollbar auf jedem Element, dessen berechneter scrollbar-color-Wert etwas anderes als auto ist.
Da scrollbar-color vererbt wird, betrifft dies auch Elemente, die es nicht selbst festlegen, aber einen von einem Vorgängerelement geerbten Wert ungleich auto haben.
Das Setzen von scrollbar-color: auto auf einem solchen Element stellt dessen ::-webkit-scrollbar-*-Styling wieder her, falls es zuvor durch eine scrollbar-color-Einstellung auf einem Vorgängerelement entfernt wurde.
Siehe Hinzufügen eines Fallbacks für Scrollleisten-Stile.
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 Scrollleiste.
autoStandarddarstellung der Plattform für den Spurteil der Scrollleiste, sofern keine anderen zugehörigen Eigenschaften für die Scrollleistenfarbe vorhanden sind. <color> <color>Wendet die erste Farbe auf den Scrollleisten-Regler und die zweite auf die Scrollleisten-Spur an.
Hinweis:
@media (forced-colors: active) setzt scrollbar-color auf auto.
Barrierefreiheit
Bei der Verwendung der Eigenschaft scrollbar-color mit bestimmten Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben ausreichend Kontrast zueinander aufweisen. Bei Schlüsselwortwerten sollten UAs sicherstellen, dass die von ihnen verwendeten Farben ausreichend 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
Färben von Überlauf-Scrollleisten
CSS
.scroller {
width: 300px;
height: 100px;
overflow-y: scroll;
scrollbar-color: #000077 #bada55;
}
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>
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |