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 der Scrollleisten-Schiene und des Schiebers fest.

Die Schiene bezieht sich auf den Hintergrund der Scrollleiste, der normalerweise unabhängig von der Scrollposition fixiert ist.

Der Schieber bezieht sich auf den beweglichen Teil der Scrollleiste, der normalerweise über der Schiene schwebt.

Wenn der scrollbar-color-Wert auf das Wurzelelement des Dokuments gesetzt wird, werden die Werte auf die Scrollleisten des Ansichtsfensters angewendet.

Syntax

css
/* 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.

auto Standard-Plattform-Rendering für den Schienen-Abschnitt der Scrollleiste, falls keine anderen verwandten Eigenschaften der Scrollleistenfarbe vorliegen.
<color> <color> Wendet die erste Farbe auf den Scrollleisten-Schieber an, die zweite auf die Scrollleisten-Schiene.

Note: @media (forced-colors: active) setzt scrollbar-color auf auto.

Barrierefreiheit

Beim Verwenden der scrollbar-color-Eigenschaft mit bestimmten Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben einen ausreichenden Kontrast zueinander haben. Für Schlüsselwortwerte sollten Benutzeragenten sicherstellen, dass die verwendeten Farben einen ausreichenden Kontrast aufweisen. Siehe Techniken für WCAG 2.0: G183: Verwenden eines Kontrastverhältnisses von 3:1.

Formale Definition

Initialer Wertauto
Anwendbar aufscrollende Boxen
VererbtJa
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

scrollbar-color = 
  auto        |
  <color>{2}

Beispiele

Färbung von Überlauf-Scrollleisten

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}

HTML

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch