Scrollen ist das Verschieben des sichtbaren Ausschnitts über einen Inhalt, der länger oder breiter ist als der Bildschirm. Der Inhalt selbst bleibt dabei unverändert, es wandert nur das Fenster, durch das der Besucher ihn sieht. Genau darin liegt der Unterschied zum Swipen, das mit derselben Fingerbewegung einen Zustand wechselt. Auf dem Telefon ist Scrollen die häufigste Handlung überhaupt.
- Scrollen
Das Verschieben des sichtbaren Ausschnitts über einen Inhalt, der länger oder breiter ist als der Bildschirm.
Beispiel: „Die Seite ist lang, aber sie scrollt sauber, weil keine Zwischenanimation die Bewegung abfängt.“Auch: im Englischen scrolling. Der Bereich, in dem gescrollt wird, heißt Scrollcontainer und entsteht, sobald ein Element mehr Inhalt hat als Platz und overflow das Scrollen zulässt.
Gegenbegriff: Swipen wertet die Wischbewegung als Befehl aus und rastet auf einen festgelegten Zustand ein. Scrollen endet dort, wo der Finger den Ausschnitt hinterlässt.
Der Browser scrollt, du setzt nur die Bedingungen
Scrollen musst du nicht bauen. Der Browser bringt Trägheit, Bildlaufleiste, Tastaturbedienung und die Bedienung per Trackpad mit, und er erledigt die Bewegung unabhängig von deinem JavaScript. Jedes Skript, das diese Aufgabe übernimmt, macht das Ergebnis schlechter.
Was du beeinflusst, sind die Bedingungen. CSS Scroll Snap lässt einen Container auf jedem Eintrag einrasten und ersetzt damit die meisten Karussell-Skripte. Die Eigenschaft overscroll-behavior mit dem Wert contain hält die Bewegung in einem inneren Container, statt sie an die Seite darunter weiterzugeben. Und scroll-margin-top sorgt dafür, dass ein Sprungziel nicht unter einer fixierten Kopfzeile landet.
Scrolltiefe ist kein Hindernis, ein abgeschnittener Rand schon
Die alte Sorge, unterhalb der Bildschirmkante werde nichts mehr gelesen, trifft so nicht zu. Besucher scrollen bereitwillig, sobald erkennbar ist, dass es weitergeht. Was sie stoppt, ist ein Seitenaufbau, dessen erster Abschnitt genau an der Kante endet: ein Bild mit voller Höhe, und die Seite wirkt zu Ende.
In unseren Projekten bauen wir deshalb bewusst einen Anschnitt ein. Die nächste Überschrift oder die Oberkante der folgenden Karte ragt ins Bild, und damit ist die Frage, ob es weitergeht, ohne Hinweistext beantwortet.
Wo Scrollen kaputtgeht
Der klassische Fehler ist das Scroll-Hijacking: Ein Skript fängt die Bewegung ab und springt in Sprüngen von Abschnitt zu Abschnitt. Es nimmt dem Besucher die Kontrolle über die Geschwindigkeit und macht die Seite mit Tastatur schwer bedienbar.
Zwei technische Fallen kommen oft dazu. Verschachtelte Scrollcontainer fangen die Bewegung ein, sodass die Seite selbst stehen bleibt; dagegen hilft overscroll-behavior. Und die Einheit vh meint auf Telefonen die Höhe ohne die Browserleiste, die beim Scrollen ein- und ausfährt, weshalb ein Abschnitt mit 100vh höher wird als der Bildschirm. Für diesen Fall nehmen wir die Einheit dvh, die den tatsächlich verfügbaren Raum meldet.