Ich will meine Scrollbar sehen

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Hinweis: Dieser Artikel - Erstveröffentlichung am 24.08.2016 - ist am 30. Juni 2020 von meinem Wordpress-Blog hierher umgezogen.

Das Problem:

Fast alle aktuellen Browser (zumindest unter macOS) verbergen Scrollbars nach kurzer Zeit, wenn nicht gescrollt wird. Für Ästheten eine feine Sache. Und auch kein Problem, wenn es um die Scrollbars für den Viewport, also für die ganze Seite geht. Der User weiß aus Erfahrung, dass er scrollen kann und muss, um Inhalte "below the fold" zu sehen.
Wenn aber einzelne Seitenelemente (z. B. divs) übergroße Inhalte besitzen, die nur durch Scrollen in Gänze sichtbar werden (CSS: overflow:auto/scroll), dann kann das ein entscheidendes Usability Problem darstellen; Weil der User nicht ohne weiteres erwartet, dass er diesen Bereich scrollen kann / muss.
Der IE macht, wie so oft, eine Ausnahme. Diesmal zum Besseren. Er blendet per default die Scrollbars nicht aus.

Die Lösung:

Lösung 1: Die Scrollbars permanent anzeigen (die Browserfunktionalität überlisten)

Das CSS: #id { height: 200px; overflow:scroll; } #id::-webkit-scrollbar { -webkit-appearance: none; width: 6px; height:6px; } #id::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #777; } #id::-webkit-scrollbar-corner { background-color:transparent; } In Zwischenablage kopieren

Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, bandit a, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, bandit a, eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, bandit a, eros.

Leider lassen sich der Firefox/macOS sowie Safari/iOS damit nicht überlisten. Siehe caniuse.com
Daher ggf. (alternativ oder zusätzlich):

Lösung 2: Eine Scoll-Animation

Mit etwas JavaScript lässt sich "onload" das Scrollen eines Elements erzeugen. Diese Animation dient als Hinweis an den User "Hallo! Ich will gescrollt werden."
Sinn macht das natürlich nur, wenn der betreffende Bereich beim Öffnen der Seite sichtbar, also "above the fold" ist.

Der Code:

<script> function scroll_int(e) { if (document.getElementById(e).scrollTop < (document.getElementById(e).scrollHeight - document.getElementById(e).offsetHeight)) { intval = document.getElementById(e).scrollHeight / 300; document.getElementById(e).scrollTop = document.getElementById(e).scrollTop + intval; } else { clearInterval(scroll_ready); } } window.onload = setTimeout(function() { scroll_ready = setInterval(function() { scroll_int('bereich') }, 2); }, 250); </script> In Zwischenablage kopieren

Die Funktion macht Folgendes:

• Die Zeile window.onload … ruft 250 ms nach dem onload die Funktion scroll_int() auf.
• Der Übergabeparameter "bereich" steht für die Id des zu scrollenden Elements, und muss natürlich entsprechend angepasst werden.
• setInterval wiederholt den Funktionsaufruf. In diesem Beispiel alle 2 ms.
• In der Funktion scroll_int() wird bei intval errechnet, um wie viele Pixel pro 2 ms gescrollt werden soll. Und zwar um ein 300stel der Höhe des Inhalts. Dadurch wird erreicht, dass der Scrollvorgang unabhängig von der Höhe des Inhalts in (theoretisch) 300 / 2 = 150 ms beendet ist. (In der Praxis wird es, abhängig von der verfügbaren Rechnerleistung, länger dauern.)
• Schließlich sorgt clearInterval dafür, dass der wiederholte Funktionsaufruf (durch setInterval) beendet wird, sobald der Scrollvorgang komplett ist.

Demo bei JSFiddle
Demo statisch

Nachtrag:

Ein schönes Beispiel für die Notwendigkeit, Scrollbars permanent anzuzeigen, ist die Darstellung der Code-Snippets. Ohne Scrollbars käme wohl niemand auf den Gedanken, dass die Codebeispiele horizontal scrollbar sind.

Und hier noch die Variante für eine horizontale Scrollbar bei JSFiddle

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. KoNx2k schrieb am Montag, 09.09.24 16:28 Uhr:

   Super, und ganz lieben Dank! Ich bin fast verzweifelt, weil ich keine Lösung für dieses Problem gefunden habe. Lösung 1 funktioniert hervorragend in meinem Stylesheet. :)