CSS scrollbar – Bildlaufleiste, Scrollleiste, Rollbalken

CSS scrollbar

scrollbar verleiht dem Browser und auch Containern mit übergroßem Inhalt und overflow: scroll Scrollleisten ein individuelles Design. Die Scrollleiste informiert den Benutzer aber auch über die Größe der Seite und seine Position innerhalb der Seite genauso wie über die Position innerhalb eines scrollenden Blocks.

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.

Rollbalken, Scrollbar und Bezeichnungen der Elemente
CSS spricht alle Elemente der Scrollbar an.

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.

1 2 3 4
.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-colorHintergrundfarbe der Leiste
::-webkit-scrollbar-widthBeite der Leiste
::-webkit-scrollbar-trackHintergrundfarbe der Leiste
::-webkit-scrollbar-thumbAnfasser
::-webkit-scrollbar-gutterstable / both-edges – Rollbalken als Overlay oder seitlich (nicht Safari)
::-webkit-scrollbar-buttonRegion oben oder unten bzw. rechts oder links
::-webkit-scrollbar-cornerEcke 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-pieceOberes 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.

Scrollleiste oder Rollbalken unter Mac OS
Mac OS – Systemeinstellung Erscheinungsbild: Rollbalken immer oder beim Scrollen? Voreinstellung ist »Automatisch«.

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.