CSS-Scrollbalken-Styling
Das CSS-Scrollbalken-Styling-Modul definiert Eigenschaften, die Sie zur visuellen Gestaltung von Scrollbalken verwenden können. Sie können die Breite des Scrollbalkens nach Bedarf anpassen. Außerdem können Sie die Farbe des Scrollbalken-Tracks, also des Hintergrunds des Scrollbalkens, und die Farbe des Scrollbalken-Thumbs, also des ziehbaren Griffs des Scrollbalkens, anpassen.
Scrollbalken-Styling in Aktion
Dieses Beispiel definiert einen schmalen Scrollbalken mit einem roten Thumb und einem orangefarbenen Track. Um den Thumb zu sehen, müssen Sie den Text scrollen. Nachdem der Scrollbalken sichtbar ist, bewegen Sie den Mauszeiger über ihn, um den Track zu sehen.
.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
}
Hinweis: Bei der Anpassung von Scrollbalken stellen Sie sicher, dass Thumb und Track ausreichend Kontrast zum umgebenden Hintergrund haben. Achten Sie auch darauf, dass der Trefferbereich des Scrollbalkens groß genug für Benutzer ist, die eine Touch-Eingabe verwenden.
Referenz
CSS-Eigenschaften
Verwandte Konzepte
overflow-block
CSS-Eigenschaftoverflow-inline
CSS-Eigenschaftoverflow-x
CSS-Eigenschaftoverflow-y
CSS-Eigenschaftoverflow
CSS-Shorthand-Eigenschaftoverflow-clip-margin
CSS-Eigenschaftscrollbar-gutter
CSS-Eigenschaftscroll-behavior
CSS-Eigenschaftscroll-margin
CSS-Shorthand-Eigenschaftscroll-padding
CSS-Shorthand-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 |