Diggi Docs

Die Scrollbar ermöglicht den Benutzer Inhalte außerhalb der Bildschirms zu erreichen und gibt Rückmeldung über die aktuelle Position innerhalb der Benutzeroberfläche.

Achtung! Scrollbars werden nativ vom Betriebsystem verwendet – z.B. im Browser. Daher ist dieses Element nicht explizit im Frontend Kit entwickelt. Bei Bedarf (z.B. in Software Applikationen) kann das folgende Design verwendet werden.

Kann eingesetzt werden, sobald es der gesamte Inhalt nicht vollständig im Bildschirm angezeigt werden kann. Nutzer erwarten, dass es weiteren Inhalt gibt.
Zum Beispiel in Verwendung in folgenden Komponenten:
- Dialog
- Dropdown
- Formularen

Typen

Temporary Scrollbar (vorübergehend eingeblendet)

Während der Benutzer eine Handlung durchführt, wird die temporäre Scrollbar angezeigt, wie zum Beispiel beim Überfahren des Mauszeigers (hover) oder Scrollen. Die Scrollbar verschwindet dann wieder, wenn die Aktion abgeschlossen ist.

Permanent Scrollbar

Die permanente Scrollbar ist für den Benutzer ständig eingeblendet und verschwindet nicht nach einer Aktion.

Beispiele

Scrollbar Horizontal

Die horizontale Scrollbar verschiebt den Inhalt nach links oder rechts.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Scrollbar Vertical

Die vertikale Scrollbar verschiebt den Inhalt auf oder ab.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Permanent Scrollbar Horizontal

Die horizontale Scrollbar verschiebt den Inhalt nach links oder rechts.

Permanent Scrollbar Vertical

Die vertikale Scrollbar verschiebt den Inhalt auf oder ab.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam blanditiis recusandae labore veritatis, rem at voluptates vero reprehenderit tempore?

Do's and Don'ts

Do

Scrollbar innerhalb eines Dialogs

Do

Scrollbar im Dropdown

Do

Scrollbar im Master Detail einblenden, sobald der gesamte Inhalt nicht sichtbar ist