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.
.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
overflow-blockCSS-Eigenschaftoverflow-inlineCSS-Eigenschaftoverflow-xCSS-Eigenschaftoverflow-yCSS-KurzschreibweiseoverflowCSS-Kurzschreibweiseoverflow-clip-marginCSS-Eigenschaftscrollbar-gutterCSS-Eigenschaftscroll-behaviorCSS-Eigenschaftscroll-marginCSS-Kurzschreibweisescroll-paddingCSS-Kurzschreibweisescroll-snap-alignCSS-Eigenschaftscroll-snap-stopCSS-Eigenschaftscroll-snap-typeCSS-Eigenschaft::-webkit-scrollbarPseudoelement- Scroll-Container, Glossarbegriff
scrollbar, ARIA-Rolle
Spezifikationen
| Spezifikation |
|---|
| CSS Scrollbars Styling Module Level 1> |