Scrollleisten zeigen die Position des Benutzers in einem Dokument an, die größer als der Anzeigebereich ist. Sie ermöglichen es dem Benutzer, durch Verschieben des Anzeigebereichs nach oben oder unten zum Rest des Dokuments zu navigieren.
Nutzer interagieren mit Scrollleisten per Touchscreen, Drehrad oder Touchpad. Durch Antippen der Pfeile in der Scrollleiste wird der Inhalt seitenweise verschoben, also in Schritten entsprechend der Bildschirmhöhe. Wird der Bildschirm jedoch ruckartig bewegt, um zu scrollen (abhängig von der Touchscreen-Empfindlichkeit), kann die dadurch entstehende Trägheit dazu führen, dass mehr als eine Seite gescrollt wird. Unabhängig davon, wie der Scrollvorgang gestartet wird, sollte die Scrollbewegung immer an einem Element einrasten.
Anatomie
Die Scrollleiste besteht aus den Scroll-Funktionen zum Hoch- und Runterscrollen sowie der Scrollfortschrittsanzeige. Die Scroll-Funktionen verwenden Pfeile, um die Scrollrichtung anzuzeigen. Die Scrollfortschrittsanzeige ist optional und zeigt den sichtbaren Inhalt und die Scrollposition im Verhältnis zum Gesamtinhalt der Seite an.

2. Scrollfortschrittsanzeige
3. Scrollfunktion
Spezifikationen
Scrollleistenposition bei gestapelter primärer Navigation und minimierter Steuerleiste

Scrollleistenposition nur mit App-Kopfzeile

Scrollleistenposition relativ zur App-Kopfzeile und Steuerleiste

Scrollleistenposition mit App-Kopfzeile und erweiterter Steuerleiste

Scrollleistenposition mit App-Leiste/Kopfzeile und minimierter Steuerleiste

Scrollleistenposition nur bei App-Leiste/Kopfzeile

Scrollleistenposition relativ zur App-Kopfzeile und Steuerleiste

Scrollleistenposition mit App-Kopfzeile und erweiterter Steuerleiste

Scrollleistenposition bei geringer Bildschirmhöhe

Optionale Scrollfortschrittsanzeige

Stile
Farbe
| Element | Farbe (Tagesmodus) | Farbe (Nachtmodus) |
|---|---|---|
| Primäre Symbole – aktiver Zustand | Weiß | Weiß @ 88% |
| Primäre Symbole – inaktiver Zustand | Weiß @ 56% | Weiß @ 50% |
| Scrollfortschrittsanzeige | Weiß @ 16% | Weiß @ 12% |
Größenangaben
| Element | Größe (dp) |
|---|---|
| Primäres Symbol | 44 |
| Berühren Sie das Ziel | 76 |
| Breite der Scroll-Fortschrittsanzeige | 6 |
| Abgerundeter Eckenradius (R4) | Voll |
Beispiele



