Scrollbar, Bildlaufleiste oder Rollbalken
CSS scrollbar tritt erst spät auf den Plan. Chrome, Safari, Edge und Opera brauchen noch ein webkit-Präfix und Firefox unterstützt scrollbar nur mit kleinen Einschränkungen.
Für die Webkit-Browser (Chrome, Safari, Opera, Edge) gibt es Scrollbalken nur über CSS-Pseudoelemente, für Firefox als reguläre CSS-Eigenschaften. Dabei sind die Laufleisten nicht auf den Browser beschränkt, sondern wirken bei Tabellen und überhaupt allen Elementen mit overflow: scroll.
Elemente scrollen – ziehen und klicken
Die Scrollbar läßt sich nicht nur scrollen oder ziehen, sondern reagiert auch auf das Drehen des Mausbuttons sowie auf einen Klick, um z.B. schnell nach oben oder unten zu springen.
.vertical::-webkit-scrollbar {
width: 1em;
background-color: #ddd;
}
.vertical::-webkit-scrollbar-thumb {
background-color: hsl(0,0%,70%);
}
.vertical {
height: 30vh;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
overflow-y: scroll;
scrollbar-color: orange blue; /** Firefox **/
}
vertical-section {
scroll-snap-align: start;
}
Hier wirkt zusätzlich ein CSS-scroll-snap: Beim Scrollen mit der Maus oder Wischen mit dem Finger raste die Elemente der scrollbaren Box an. Das gilt auch beim Scrollen mit dem Rollbalken und erspart dem Benutzer das frickelige Einpassen der Region an die Grenzen.
scrollbar für Pseudoelemente
| ::-webkit-scrollbar-color | Hintergrundfarbe der Leiste |
| ::-webkit-scrollbar-width | Beite der Leiste |
| ::-webkit-scrollbar-track | Hintergrundfarbe der Leiste |
| ::-webkit-scrollbar-thumb | Anfasser |
| ::-webkit-scrollbar-gutter | stable / both-edges – Rollbalken als Overlay oder seitlich (nicht Safari) |
| ::-webkit-scrollbar-button | Region oben oder unten bzw. rechts oder links |
| ::-webkit-scrollbar-corner | Ecke oben oder unten bzw. rechts oder links |
| ::-webkit-scrollbar-thumb:hover | |
| ::-webkit-scrollbar-thumb:active |
@supports selector(::-webkit-scrollbar) {
…
}
Alle Elemente können mit einer Hintergrundfarbe, einem Verlauf oder einem Bild unterlegt werden.
Und für Detailverliebte
| ::-webkit-scrollbar-track-piece | Oberes Teilstück |
| ::-webkit-scrollbar-thumb:vertical | |
| ::-webkit-scrollbar-button:vertical:start | |
| ::-webkit-scrollbar-button:vertical:end | |
| ::-webkit-scrollbar-thumb:horizontal | |
| ::-webkit-scrollbar-button:horizontal:start | |
| ::-webkit-scrollbar-button:horizontal:end | |
| ::-webkit-scrollbar-button:vertical:decrement up | |
| ::-webkit-scrollbar-button:vertical:increment down | |
| ::-webkit-scrollbar-button:horizontal:decrement left | |
| ::-webkit-scrollbar-button:horizontal:increment right |
Mac OS: Zeigt her Eure Rollbalken
Wenn sich eine Region der Webseite scrollen läßt, sollten die Scrollleisten sichtbar sein. Anders herum: Wenn Inhalte nicht sollbar sind, können Scrollleisten den Benutzer frustrieren. Die Scrolleiste soll breit genug sein, um sie mit dem Finger gut zu fassen.
In den jüngeren Versionen zeigt Mac OS Scrollleisten aber nicht mehr automatisch an, sondern nur während der Benutzer die Seite oder einen scrollbaren Container scrollt. Der Benutzer kann zwar in den Systemeinstellungen entscheiden, ob ein Fenster Scrollleisten zeigen soll – das gilt auch für das Browserfenster sowie Elemente der Webseite –, aber nicht jeder Benutzer weiß davon.
Scrollbar für Firefox
Firefox braucht weder einen Präfix noch ein Pseudo-Element, sondern die Scrollleiste wird direkt über scrollbar-color angesprochen. Die erste Farbangabe gilt dem Track, also der Leiste, die zweite Farbe überlagert den Thumb, den Anfasser.
.elem {
scrollbar-color: orange blue;
scrollbar-width: thin;
}
Mac OS: Das Blau der Laufleiste zeigt sich nur, wenn der Cursor den scrollenden Block verläßt. Ein Verlauf, so wie bei der Pseudo-Element-Notation für Webkit-Browser, scheint nicht zu funktionieren.
Für scrollbar-width (Breite der Bildlaufleiste) gibt es die Werte:
- auto (wie es das System vorgibt, Voreinstellung),
- thin für eine relativ schmale Leite und
- none, um keinen Track zu zeigen.
- Und natürlich inherit, unset und reset.