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.
.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
overflow-block
CSS-Eigenschaftoverflow-inline
CSS-Eigenschaftoverflow-x
CSS-Eigenschaftoverflow-y
CSS-Eigenschaftoverflow
CSS-Kurzform Eigenschaftoverflow-clip-margin
CSS-Eigenschaftscrollbar-gutter
CSS-Eigenschaftscroll-behavior
CSS-Eigenschaftscroll-margin
CSS-Kurzform Eigenschaftscroll-padding
CSS-Kurzform Eigenschaftscroll-snap-align
CSS-Eigenschaftscroll-snap-stop
CSS-Eigenschaftscroll-snap-type
CSS-Eigenschaft::-webkit-scrollbar
Pseudo-Element- scroll container Glossarbegriff
scrollbar
ARIA-Rolle
Spezifikationen
Specification |
---|
CSS Scrollbars Styling Module Level 1 |