Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CSS-Scrollbars-Styling

Das Modul CSS-Scrollbars-Styling definiert Eigenschaften, die Sie zur visuellen Gestaltung von Scrollbars verwenden können. Sie können die Breite der Scrollbar nach Bedarf anpassen. Sie können auch die Farbe des Scrollbar-Tracks, also des Hintergrunds der Scrollbar, und die Farbe des Scrollbar-Thumbs, also des verschiebbaren Griffs der Scrollbar, anpassen.

Styling von Scrollbars in Aktion

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

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

Hinweis: Beim Anpassen von Scrollbars stellen Sie sicher, dass Thumb und Track genügend Kontrast zum umgebenden Hintergrund haben. Achten Sie auch darauf, dass der Berührungsbereich der Scrollbar groß genug für Benutzer ist, die Touch-Eingaben verwenden.

Referenz

CSS-Eigenschaften

Verwandte Konzepte

Spezifikationen

Spezifikation
CSS Scrollbars Styling Module Level 1

Siehe auch