CSS-Scrollleisten-Styling

Das CSS-Scrollleisten-Styling-Modul definiert Eigenschaften, die Sie für die visuelle Gestaltung von Scrollleisten verwenden können. Sie können die Breite der Scrollleiste nach Bedarf anpassen. Zusätzlich können Sie die Farbe des Tracks der Scrollleiste, also den Hintergrund der Scrollleiste, sowie die Farbe des Thumbs der Scrollleiste, also des verschiebbaren Griffs der Scrollleiste, anpassen.

Scrollleisten-Styling in Aktion

Dieses Beispiel definiert eine schmale Scrollleiste mit einem roten Thumb und einem orangefarbenen Track. Um den Thumb zu sehen, müssen Sie den Text scrollen. Nachdem die Scrollleiste sichtbar ist, bewegen Sie die Maus darüber, um den Track zu sehen.

css
.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}

Hinweis: Beim Anpassen von Scrollleisten stellen Sie sicher, dass Thumb und Track einen ausreichenden Kontrast zum umgebenden Hintergrund haben. Stellen Sie außerdem sicher, dass der Bereich für die Scrollleiste groß genug für Personen ist, die Touch-Eingaben verwenden.

Referenz

CSS-Eigenschaften

Verwandte Konzepte

Spezifikationen

Specification
CSS Scrollbars Styling Module Level 1

Siehe auch