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.
.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
overflow-block
CSS-Eigenschaftoverflow-inline
CSS-Eigenschaftoverflow-x
CSS-Eigenschaftoverflow-y
CSS-Eigenschaftoverflow
CSS-Kurzschreibweiseoverflow-clip-margin
CSS-Eigenschaftscrollbar-gutter
CSS-Eigenschaftscroll-behavior
CSS-Eigenschaftscroll-margin
CSS-Kurzschreibweisescroll-padding
CSS-Kurzschreibweisescroll-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 |