Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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 Scrollbar-Spur und des Daumens fest.

Die Spur bezieht sich auf den Hintergrund der Scrollbar, der im Allgemeinen unabhängig von der Scrollposition fest 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 root-Element des Dokuments festgelegt ist, werden die Werte auf die Ansichtsfenster-Scrollbars 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 Scrollbar.

auto Standard-Plattformdarstellung für den Spurbereich der Scrollbar, in Abwesenheit anderer zugehöriger Scrollbar-Farbeingenschaften.
<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

Bei der Verwendung der scrollbar-color-Eigenschaft mit bestimmten Farbwerten sollten Autoren sicherstellen, dass die angegebenen Farben genügend Kontrast zueinander haben. Bei Schlüsselwortwerten sollten Benutzeragenten sicherstellen, dass die von ihnen verwendeten Farben genügend Kontrast haben. Siehe Techniken für WCAG 2.0: G183: Verwendung eines Kontrastverhältnisses von 3:1.

Formale Definition

Anfangswertauto
Anwendbar aufscrollende Boxen
VererbtJa
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

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

Beispiele

Farbige Überlauf-Scrollbars

CSS

css
.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #000077 #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

Siehe auch