Scrollen

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 das Scrollen läuft 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.

Was du am Scrollen steuern kannst, ohne Skript

Vier Dinge, alle in CSS. Sanftes Springen zu Ankern über scroll-behavior: smooth. Ein Abstand nach oben, damit ein fester Kopfbereich das Sprungziel nicht verdeckt, über scroll-margin-top. Einrasten auf Abschnitten über scroll-snap-type. Und das Stoppen der Scrollkette, damit ein Wisch in einem Panel nicht die Seite dahinter bewegt.

html {
  scroll-behavior: smooth;   /* Sprünge zu Ankern gleiten */
}

:target, [id] {
  scroll-margin-top: 5rem;   /* Platz für den festen Kopfbereich */
}

.panel {
  overscroll-behavior: contain;  /* der Wisch bleibt im Panel */
}

Der zweite Punkt ist der, der am häufigsten fehlt. Ohne ihn landet jeder Sprung aus dem Inhaltsverzeichnis mit der Überschrift hinter der Navigationsleiste, und der Besucher sucht die Stelle, die er gerade angesteuert hat. Bei der letzten Eigenschaft lohnt ein Blick auf die Browserunterstützung: MDN führt overscroll-behavior derzeit nicht als Baseline, weil sie in einigen verbreiteten Browsern nicht greift. Wo sie fehlt, scrollt die Seite dahinter einfach mit.

Scrolltiefe messen, ohne die Seite auszubremsen

Mit einem Beobachter statt mit einem Ereignis. Ein Scroll-Ereignis feuert dutzende Male je Sekunde und zwingt zu Berechnungen im falschen Moment; der Intersection Observer meldet nur, wenn ein Element den sichtbaren Bereich betritt, und läuft außerhalb des Zeichenvorgangs.

const marken = document.querySelectorAll('[data-marke]');

const beobachter = new IntersectionObserver(eintraege => {
  eintraege.filter(e => e.isIntersecting).forEach(e => {
    melde('scrolltiefe', e.target.dataset.marke);   // 25, 50, 75, 100
    beobachter.unobserve(e.target);                  // je Marke einmal
  });
}, { threshold: 0 });

marken.forEach(m => beobachter.observe(m));

Was die Zahlen taugen, hängt am Seitenaufbau: Auf einer kurzen Seite erreichen fast alle das Ende, auf einer langen fast niemand. Vergleichbar werden sie erst im Verlauf derselben Seite oder zwischen Seiten ähnlicher Länge.

Die drei häufigsten Scroll-Fehler

Erstens die entführte Bewegung: Skripte, die das Scrollen abfangen und in eine eigene Animation umrechnen. Sie fühlen sich auf dem Rechner des Entwicklers geschmeidig an und auf fremden Geräten zäh. Zweitens die unendliche Liste ohne Fußbereich; alles, was dort stand, ist danach unerreichbar. Drittens verschachtelte Scrollbereiche, bei denen niemand mehr weiß, welcher sich gerade bewegt.

Dazu kommt ein Fehler, der erst bei der Prüfung auffällt: ein waagerecht scrollender Bereich ohne Tastaturzugang. Er braucht tabindex und eine erkennbare Fokusmarkierung, sonst ist der Inhalt für einen Teil der Besucher nicht erreichbar.

Was scrollen auf Deutsch heißt

Scrollen heißt, einen Bildschirminhalt, der nicht im Ganzen auf den Bildschirm passt, Stück für Stück zu verschieben. So erklärt es der Duden, der das Verb als EDV-Wort führt und auf das englische to scroll zurückführt. Dahinter steht die Schriftrolle: Das Cambridge Dictionary erklärt scroll als lange Rolle aus Papier, wie sie vor allem in der Antike zum Schreiben diente. Das Bild trifft die Sache, denn auch bei der Rolle bleibt der Text, wie er ist, und nur der sichtbare Abschnitt wandert.

Gebeugt wird scrollen wie ein schwaches deutsches Verb: er scrollt, sie scrollte, wir haben gescrollt. Für die Aussprache lässt der Duden zwei Fassungen gelten, eine mit langem o und eine englische mit ou.

Scrollen ohne Maus

Jede Seite lässt sich auch mit der Tastatur oder dem Trackpad scrollen. Die Tabelle folgt den Hilfeseiten von Google Chrome, Apple, Microsoft und Google Android.

Eingabe	Wirkung
Leertaste oder Bild ab	eine Bildschirmhöhe nach unten
Umschalt + Leertaste oder Bild auf	eine Bildschirmhöhe nach oben
Pos1 und Ende	an den Anfang und an das Ende der Seite
Umschalt und Mausrad	waagerecht scrollen
Trackpad am Mac: zwei Finger nach oben oder unten	scrollen
Touchpad unter Windows: zwei Finger waagerecht oder senkrecht ziehen	scrollen
Android: von der Displaymitte nach links oder rechts wischen	waagerecht scrollen

Für lange Texte ist die Leertaste der bequemste Weg: ein Druck, eine Bildschirmhöhe weiter, mit Umschalt wieder zurück. Sie funktioniert, solange kein Eingabefeld den Fokus hat, und genau deshalb gehört ein Suchfeld nicht automatisch fokussiert an den Seitenanfang.

Wo Scrollen in zwei Richtungen zur Hürde wird

Scrollen trägt eine Seite in einer Richtung, in zwei Richtungen zugleich bremst es. Die WCAG verlangen deshalb im Erfolgskriterium 1.4.10 Reflow auf Stufe AA, dass senkrecht gescrollte Inhalte bei einer Breite von 320 CSS-Pixeln ohne waagerechtes Scrollen auskommen. Das entspricht einem Fenster von 1280 Pixeln bei 400 Prozent Zoom.

Ausgenommen sind Inhalte, die ihre zweidimensionale Anordnung brauchen, darunter Karten, Diagramme, Videos und Datentabellen. Bei einer Tabelle darf also die Tabelle selbst waagerecht scrollen, ihre einzelnen Zellen aber nicht, und der Text drumherum bricht um. Wie das bei breiten Tabellen aussieht, zeigt der Eintrag Responsive Tabellen.

Den Stand des Scrollens beim Zurückspringen erhalten

Beim Zurückspringen stellt der Browser die alte Scrollposition von sich aus wieder her. Das geht schief, sobald eine Liste ihre Einträge erst per Skript nachlädt: Der Browser springt an eine Stelle, die es in diesem Moment noch nicht gibt. Mit history.scrollRestoration übernimmt das Skript die Aufgabe; die Eigenschaft ist laut MDN seit Januar 2020 in allen großen Browsern verfügbar.

Der Ausschnitt merkt sich die Position im Verlaufseintrag und springt erst dorthin, wenn die Liste geladen ist; liste und ladeEintraege() stehen für den eigenen Code.

history.scrollRestoration = 'manual';  // das Skript springt selbst zurück

// Vor dem Wechsel zur Detailseite den Stand im Verlaufseintrag merken
liste.addEventListener('click', e => {
  if (e.target.closest('a')) {
    history.replaceState({ ...history.state, scrollY: window.scrollY }, '');
  }
});

// Zurück auf der Liste: erst die Einträge laden, dann an die gemerkte Stelle
async function zeigeListe() {
  await ladeEintraege();
  window.scrollTo(0, history.state?.scrollY ?? 0);
}

Gebraucht wird das bei Listen mit Nachladen und in einer Single Page Application. Bei gewöhnlichen Seiten bleibt der Wert auf auto, dort erledigt der Browser das Zurückspringen selbst.

Die Richtung beim Scrollen am Mac umkehren

Wähle im Apple-Menü „Systemeinstellungen“, klick in der Seitenleiste auf „Trackpad“ und schalte unter „Scrollen und Zoomen“ die Option „Natürliches Scrollen“ ein oder aus. Eingeschaltet bewegt sich der Inhalt in die Richtung deiner Finger, wie auf dem Telefon; ausgeschaltet bewegt er sich in die Gegenrichtung. Die Option steht so in der Mac-Hilfe.

Eine Webseite mit dem Mausrad waagerecht scrollen

Halt die Umschalttaste gedrückt und dreh am Mausrad. Chrome führt das in seiner Hilfe als Weg zum waagerechten Scrollen. So erreichst du auch Tabellen und Galerien, die über den Rand hinausgehen und keine Pfeile anbieten.

Herausfinden, warum sich eine Seite waagerecht scrollen lässt

Gib in der Konsole der Entwicklerwerkzeuge diese Zeile ein. Sie listet jedes Element, dessen rechte Kante über die Breite des Fensters hinausragt.

[...document.querySelectorAll('body *')].filter(el =>
  el.getBoundingClientRect().right > document.documentElement.clientWidth)

Meist ist der Übeltäter ein Bild ohne max-width: 100% oder ein Element mit fester Breite in Pixeln. Wer das oberste Element der Liste repariert, ist oft alle darunter mit los, weil sie nur in ihm stecken.

Witziges und Kurioses rund ums Scrollen

Der Erfinder des endlosen Scrollens hat sich später kritisch über seine Erfindung geäußert. Aza Raskin entwarf das Infinite Scroll 2006, damals bei der Beratungsfirma Humanized. Der BBC sagte er im Juli 2018, er habe nicht erkannt, wie stark die Funktion zum Weitermachen verleitet: Wer dem Gehirn keine Zeit lasse, seinen Impulsen hinterherzukommen, scrolle einfach weiter.

Das Gegenmodell ist so alt wie das Buch: die Pagination mit Seitenzahlen und einem Ende. Wer eine lange Liste baut, kann beides verbinden, etwa mit einer Schaltfläche „Mehr laden“, die den Besucher entscheiden lässt, ob er weiterscrollt.