Bildlaufleistenfarbe - CSS-Tricks

Anonim

Die scrollbar-colorEigenschaft steuert die beiden Farben einer Bildlaufleiste: die Daumenfarbe und die Spurfarbe . scrollbar-colorist Teil des Entwurfs der Scrollbars Module Level 1 der CSS-Arbeitsgruppe, an dem derzeit noch gearbeitet wird.

Zuvor scrollbar-colorhatten Entwickler keine Standardmethode, um das Standard-Erscheinungsbild der Bildlaufleisten eines Browsers zu ändern, ohne die Bildlaufleiste über overflow: hiddenJavaScript-basierte Bildlaufleisten auszublenden und zu rendern oder Browser-vorangestellte Bildlaufleistenattribute zu verwenden. Mit scrollbar-colorauf der anderen Seite können wir eine Scrollbar Stil redoing Browser - Funktionalität oder mit hersteller Präfixe ein Design , ohne auf übereinstimmen.

.scrollable-element ( scrollbar-color: red yellow; )
Gehen Sie wild mit benutzerdefinierten Farben

scrollbar-colorAkzeptiert auch Werte von darkund, lightum den Einstellungen eines Benutzers zu entsprechen, wenn dieser unter Mac OS X einen dunklen Modus verwendet.

.scrollable-element ( scrollbar-color: dark; )

Ab März 2019 ist in keinem Browser Unterstützung für darkund lightWerte verfügbar. wird in Firefox unterstützt. Weitere Informationen finden Sie im Abschnitt zur Browserunterstützung.

Syntax

scrollbar-color: auto | dark | light | ;

Werte

scrollbar-color akzeptiert die folgenden Werte:

  • auto ist der Standardwert und rendert die Standardfarben der Bildlaufleiste für den Benutzeragenten.
  • dark weist den Benutzeragenten an, dunklere Bildlaufleisten zu verwenden, um dem aktuellen Farbschema zu entsprechen.
  • light weist den Benutzeragenten an, hellere Bildlaufleisten zu verwenden, um dem aktuellen Farbschema zu entsprechen.
  • Gibt zwei Farben an, die für die Bildlaufleiste verwendet werden sollen. Die erste Farbe ist für den „Daumen“ oder den beweglichen Teil der Bildlaufleiste, der oben angezeigt wird. Die zweite Farbe ist für die „Spur“ oder den festen Teil der Bildlaufleiste.

Beispiel

Dies kombiniert die neue Spezifikationssyntax und das WebKit-Präfix.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
91 * 87 11 88 * TP *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 * Nein 81 * 14.0-14.4 *

verbunden

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ressourcen

  • Der aktuelle Status der Styling-Bildlaufleisten
  • Benutzerdefinierte Bildlaufleisten in WebKit
  • CSSWG Scrollbars Modulentwurf
  • W3C-Sammlung von Anwendungsfällen für die Änderung der Bildlaufleiste
  • Zukunft von CSS: Bildlaufleisten auf dev.to.
  • Chromium Issue 891944