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

View in English Always switch to English

Gestaltung von CSS-Scrollbalken

Das Modul CSS scrollbars styling definiert Eigenschaften, mit denen Sie Scrollbalken visuell gestalten können. Sie können die Breite des Scrollbalkens nach Bedarf anpassen. Außerdem können Sie die Farbe der Scrollbalken-Spur (des Hintergrunds) und des Scrollbalken-Schiebers (des verschiebbaren Griffs) anpassen.

Scrollbalken-Gestaltung in Aktion

Dieses Beispiel definiert einen schmalen Scrollbalken mit einem blaugrünen Schieber und einer helleren blaugrünen Spur. Scrollen Sie durch den Text, um den Schieber zu sehen. Sobald der Scrollbalken sichtbar ist, bewegen Sie den Mauszeiger darüber, um die Spur zu sehen.

css
.poem {
  overflow: scroll;
  scrollbar-color: #0b4f4a #5f9e98;
  scrollbar-width: thin;
}

Hinweis: Achten Sie beim Anpassen von Scrollbalken darauf, dass Schieber und Spur einen ausreichenden Kontrast zum umgebenden Hintergrund aufweisen. Stellen Sie außerdem sicher, dass der Interaktionsbereich des Scrollbalkens groß genug für Personen ist, die eine Touch-Eingabe verwenden.

Referenz

CSS-Eigenschaften

Verwandte Konzepte

Spezifikationen

Spezifikation
CSS Scrollbars Styling Module Level 1

Siehe auch