scrollbar-color
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die scrollbar-color CSS Eigenschaft legt die Farbe des Scrollleisten-Hintergrunds und des Schiebers fest.
Der Hintergrund bezieht sich auf den Hintergrund der Scrollleiste, welcher generell unabhängig von der Scrollposition fixiert ist.
Der Schieber bezieht sich auf den beweglichen Teil der Scrollleiste, welcher normalerweise über dem Hintergrund schwebt.
Wenn der scrollbar-color Wert auf dem Wurzelelement des Dokuments gesetzt ist, werden die Werte auf die Scrollleisten des Ansichtsfensters angewendet.
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 Scrollleiste.
autoStandard-Plattform-Rendering für den Hintergrundteil der Scrollleiste, wenn keine anderen damit verbundenen Scrollleistenfarben-Eigenschaften vorhanden sind. <color> <color>Wendet die erste Farbe auf den Scrollleisten-Schieber und die zweite auf den Scrollleisten-Hintergrund an.
Hinweis:>@media (forced-colors: active) setzt scrollbar-color auf auto.
Barrierefreiheit
Bei der Verwendung der scrollbar-color Eigenschaft mit spezifischen Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben ausreichend Kontrast zueinander haben. Bei Schlüsselwortwerten sollten Benutzeragenten sicherstellen, dass die verwendeten Farben ausreichend Kontrast haben. 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
| Specification |
|---|
| CSS Scrollbars Styling Module Level 1 # scrollbar-color |