Scrollbalken anzeigen

[Matthias Scharwies]

Guten Morgen Gernot,

unsere Seiten im Wiki waren veraltet, ich habe mal versucht den aktuellen Stand zusammenzufassen:

• Scrollbalken gestalten

Ursprünglich galten solche Scrollbalken als Teil der Benutzeroberfläche, die sich nicht oder nur über Umwege stylen lassen konnten. Auch heute noch verhalten sich die Browser nicht konsistent, obwohl in den letzten Jahren viel vereinheitlicht wurde.

…

• CSS erlaubt das Scrollen, normalerweise mit:
  • overflow: auto; → Scrollbalken erscheinen nur bei Bedarf
  • overflow: scroll; → Scrollbalken werden immer angezeigt, auch wenn sie nicht benötigt werden
  • overflow: hidden; → keine Scrollbalken und kein Scrollen erlaubt

Und hier zeigt sich ein erstes UI-Problem: In Chrome und Edge sind Scrollbalken immer sichtbar. Im Firefox und bei Safari zeigen sich die Scrollbalken nur, wenn die Elemente mit Maus, Touch oder Tastatur-(Pfeilen) angesteuert werden, wobei dies im Mac OS eingestellt werden kann.[2]

Wir haben intern diskutiert, ob und wie man Nutzern von Firefox und Safari anzeigen kann, dass scrollbare Inhalte vorhanden sind.

Ein Safari-Nutzer meinte:

irgendwie weiß ich das 😎. Den meisten(?) Seiten sieht man an, dass da noch was kommt. Oder ist es Iphone-Erfahrung?

Das stimmt, weil man auf dem Handy eh alles scrollen muss - aber wie sieht es auf dem Desktop aus?

Dieses Beispiel (Bei MDN) hat ein zusätzliches div id="info", dass dem Nutzer eine Scroll-Möglichkeit anzeigt.
Das könnte man auch als Pseudoelement angeben, müsste dem zu scrollenden Element aber eine Klasse .scrollable hinzufügen.

Herzliche Grüße
Matthias Scharwies