CSS Scrollbar-Styling

Das Modul CSS Scrollbar-Styling definiert Eigenschaften, die Sie für die visuelle Gestaltung von Scrollleisten verwenden können. Sie können die Breite der Scrollleiste nach Bedarf anpassen. Sie können auch die Farbe des Scrollleisten-Tracks anpassen, der den Hintergrund der Scrollleiste darstellt, und die Farbe des Scrollleisten-Thumbs, welches der verschiebbare Griff der Scrollleiste ist.

Scrollleisten-Styling in Aktion

Dieses Beispiel definiert eine dünne 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, fahren Sie mit der Maus darüber, um den Track zu sehen.

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

Hinweis: Beim Anpassen von Scrollleisten sollten Sie darauf achten, dass Thumb und Track ausreichend Kontrast zum umgebenden Hintergrund haben. Außerdem sollte der Trefferbereich der Scrollleiste groß genug für Personen sein, die Touch-Eingaben verwenden.

Referenz

CSS-Eigenschaften

Verwandte Konzepte

Spezifikationen

Specification
CSS Scrollbars Styling Module Level 1

Siehe auch