Scrollbar-color | CSS-Tricks

Die Eigenschaft scrollbar-color steuert die beiden Farben einer Scrollleiste: die Daumenfarbe und die Spurfarbe. scrollbar-color ist Teil des Scrollbars Module Level 1 Draft der CSS Working Group, das zum Zeitpunkt des Schreibens noch in Arbeit ist.

Vor scrollbar-color hatten Entwickler keine standardmäßige Möglichkeit, das Standardaussehen der Scrollleisten eines Browsers zu ändern, ohne die Scrollleiste über overflow: hidden zu verbergen und JavaScript-basierte Scrollleisten zu rendern oder browser-präfixierte Scrollleistenattribute zu verwenden. Mit scrollbar-color können wir dagegen eine Scrollleiste an ein Design anpassen, ohne die Browserfunktionalität neu erstellen oder Vendor-Präfixe verwenden zu müssen.

.scrollable-element {
  scrollbar-color: red yellow;
}

scrollbar with yellow track and red thumb — Seien Sie kreativ mit benutzerdefinierten Farben

scrollbar-color akzeptiert auch die Werte dark und light, um die Präferenzen eines Benutzers abzugleichen, wenn er etwas wie den Dark Mode auf Mac OSX verwendet.

.scrollable-element {
  scrollbar-color: dark;
}

Stand März 2019 ist die Unterstützung für die Werte dark und light in keinem Browser verfügbar. wird in Firefox unterstützt. Weitere Details finden Sie im Abschnitt Browser-Unterstützung unten.

Syntax

scrollbar-color: auto | dark | light | <color>;

Werte

scrollbar-color akzeptiert die folgenden Werte

auto ist der Standardwert und rendert die Standardfarben der Scrollleiste für den Benutzeragenten.
dark weist den Benutzeragenten an, dunklere Scrollleisten zu verwenden, um das aktuelle Farbschema abzugleichen.
light weist den Benutzeragenten an, hellere Scrollleisten zu verwenden, um das aktuelle Farbschema abzugleichen.
<color> gibt zwei Farben für die Scrollleiste an. Die erste Farbe ist für den "Daumen" oder den beweglichen Teil der Scrollleiste, der oben erscheint. Die zweite Farbe ist für die "Spur" oder den festen Teil der Scrollleiste.

Beispiel

Dies kombiniert die Syntax der neuen Spezifikation mit den WebKit-präfixierten Elementen.

Browser-Unterstützung

Diese Browser-Supportdaten stammen von Caniuse, wo weitere Details verfügbar sind. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrome	Firefox	IE	Edge	Safari
121	64	11	121	TP*

Mobil / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
127	127	127*	13.4-13.7*