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 scrollbar-color CSS Eigenschaft legt die Farbe der Scrollbar-Spur und des Daumens fest.
Die Spur bezieht sich auf den Hintergrund der Scrollbar, der im Allgemeinen unabhängig von der Scrollposition fixiert ist.
Der Daumen bezieht sich auf den beweglichen Teil der Scrollbar, der normalerweise über der Spur schwebt.
Wenn der Wert von scrollbar-color auf dem Wurzelelement des Dokuments gesetzt wird, werden die Werte auf die Viewport-Scrollleisten angewendet.
Hinweis:
Browser ignorieren die nicht standardmäßige ::-webkit-scrollbar Familie von Pseudoelementen 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 setzen, sondern einen nicht-auto Wert von einem Vorfahren erben.
Wenn auf ein solches Element scrollbar-color: auto gesetzt wird, wird dessen ::-webkit-scrollbar-* Stil wiederhergestellt, falls er zuvor durch eine scrollbar-color Einstellung auf einem Vorfahren entfernt wurde.
Siehe Hinzufügen eines Fallbacks für Scrollbar-Stile.
Syntax
/* Keyword values */
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 Scrollbar.
autoStandard-Plattform-Rendering für den Spurteil der Scrollleiste, in Ermangelung anderer verwandter Scrollleisten-Farbeigenschaften. <color> <color>Wendet die erste Farbe auf den Scrollbar-Daumen an, die zweite auf die Scrollbar-Spur.
Hinweis:
@media (forced-colors: active) setzt scrollbar-color auf auto.
Barrierefreiheit
Beim Verwenden der scrollbar-color Eigenschaft mit spezifischen Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben genügend Kontrast zueinander haben. Für Schlüsselwortwerte sollten UAs sicherstellen, dass die von ihnen verwendeten Farben genügend Kontrast bieten. 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ärbung 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 |