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 Scrollbalken-Hintergrunds und des Scrollbalken-Schiebers fest.

Der Hintergrund bezieht sich auf den Hintergrund des Scrollbalkens, der im Allgemeinen unabhängig von der Scrollposition fest ist.

Der Schieber bezieht sich auf den beweglichen Teil des Scrollbalkens, der normalerweise über dem Hintergrund schwebt.

Wenn der Wert von scrollbar-color am Wurzelelement des Dokuments festgelegt wird, werden die Werte auf die Ansicht-Scrollbalken 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 des Scrollbalkens.

`auto`	Standard-Plattformdarstellung für den Hintergrundanteil des Scrollbalkens, falls keine anderen scrollbar-bezogenen Farbeigenschaften vorhanden sind.
`<color> <color>`	Wendet die erste Farbe auf den Schieber des Scrollbalkens an, die zweite auf den Hintergrund des Scrollbalkens.

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

Bei der Verwendung der scrollbar-color Eigenschaft mit bestimmten Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben ausreichend Kontrast zueinander haben. Bei Schlüsselwortwerten sollten Benutzeragenten sicherstellen, dass die von ihnen 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

Farbige Überlauf-Scrollbalken

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