Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Ich will meine Scrollbar sehen

Mittwoch, 24. August 2016

Das Problem:

Fast alle aktuellen Browser 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.
IE / Edge machen, wie so oft, eine Ausnahme. Diesmal zum Besseren. Sie blenden per default die Scrollbars nicht aus.

Die Lösung:

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

Das zu scrollende Element erhält die Klasse force_scrollbars, und ins CSS kommt:
.force_scrollbars::-webkit-scrollbar {
-webkit-appearance: none;
width: 6px;
height:6px;
}
.force_scrollbars::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
}

Leider lässt sich der Firefox damit nicht überlisten. (Details: caniuse.com) Daher (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>

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 meines Blogs auf Smartphones. Namentlich 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



Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE