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.
.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
overflow-blockCSS-Eigenschaftoverflow-inlineCSS-Eigenschaftoverflow-xCSS-Eigenschaftoverflow-yCSS-EigenschaftoverflowCSS-Kurzschreibweiseoverflow-clip-marginCSS-Eigenschaftscrollbar-gutterCSS-Eigenschaftscroll-behaviorCSS-Eigenschaftscroll-marginCSS-Kurzschreibweisescroll-paddingCSS-Kurzschreibweisescroll-snap-alignCSS-Eigenschaftscroll-snap-stopCSS-Eigenschaftscroll-snap-typeCSS-Eigenschaft::-webkit-scrollbarPseudo-Element- scroll container Glossarbegriff
scrollbarARIA-Rolle
Spezifikationen
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1> |