Farbe oder Breite einer Bildlaufleiste anpassen

Webfunktionen: scrollbar-color scrollbar-width

Sie können das Erscheinungsbild von Scrollleisten mit den Standard-CSS-Eigenschaften scrollbar-color und scrollbar-width anpassen.

  • scrollbar-color: Akzeptiert zwei <color>-Werte. Der erste gilt für den Schieberegler (den beweglichen Teil) und der zweite für die Schiene (den festen Hintergrund).
  • scrollbar-width: Akzeptiert auto (Standard), thin (eine dünnere Variante) oder none (blendet die Bildlaufleiste vollständig aus, während die Scrollbarkeit erhalten bleibt).

scrollbar-color und scrollbar-width anwenden

OBLIGATORISCH: Verwenden Sie scrollbar-color und scrollbar-width für den scrollbaren Container.

Wenn Sie scrollbar-color verwenden, sollten Sie CSS-Variablen verwenden, um die Farben von Thumb und Track getrennt zu halten. Das verbessert die Lesbarkeit und Wartbarkeit (insbesondere bei der Verwendung von Fallbacks).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Fallback-Strategien

Fallbacks und Browserunterstützung für „scrollbar-color“

Diese Funktion ist eine progressive Verbesserung und erfordert nicht immer Fallbacks.

Wenn das Styling wichtig ist und das Baseline-Ziel des Nutzers „Baseline – allgemein verfügbar“ oder früher ist, SOLLTEN Sie die nicht standardmäßigen ::-webkit-scrollbar-Pseudoelemente als Fallbacks einfügen.

Setzen Sie Legacy-Fallbacks in einen @supports not (scrollbar-color: auto)-Block, um Konflikte zwischen Standard-Properties und Legacy-WebKit-Selektoren in Browsern zu vermeiden, die beide nativ unterstützen.

Wenn Sie benutzerdefinierte Eigenschaften verwenden, um Farben zu definieren, werden diese automatisch auf die alten WebKit-Selektoren übertragen. Sie müssen sie NICHT duplizieren.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}