Ratgeber: Eine lange Seitenleiste soll am Ende nicht überraschend die Seite mitziehen

Die Trefferliste bewegt sich plötzlich mit

Eine Filterseitenleiste enthält viele Kategorien und besitzt einen eigenen Scrollbereich. Eine Person scrollt bis zur letzten Kategorie weiter. Danach bewegt sich unerwartet die dahinterliegende Ergebnisseite. Dieses Weiterreichen der Scrollbewegung kann verwirren, besonders wenn der sichtbare Bereich wie eine eigenständige Auswahl wirkt.

MDN beschreibt overscroll-behavior als Steuerung des Verhaltens an der Grenze eines Scrollcontainers. Der Wert contain kann das Weiterreichen der Bewegung nach außen verhindern. Die Dokumentation weist zugleich auf Unterschiede bei der Browserunterstützung hin. Der Ratgeber behandelt bestehende Technik und behauptet weder eine neue Veröffentlichung noch identisches Verhalten in allen Browsern.

Erst den Scrollbereich vereinfachen

Prüfe vor einer CSS-Ergänzung, ob die Seitenleiste wirklich einen eigenen begrenzten Bereich braucht. Bei wenigen Filtern ist eine gewöhnliche Seite mit einem gemeinsamen Scrollweg häufig leichter zu verstehen. Ein zusätzlicher innerer Scrollbereich sollte einen konkreten Nutzen haben, etwa eine lange Auswahl neben dauerhaft sichtbaren Ergebnissen.

Baue für eine lokale Probe genügend Kategorien ein, damit das Ende tatsächlich erreichbar ist. Teste zuerst den unveränderten Zustand. Ergänze danach die gewünschte Begrenzung am tatsächlichen Scrollcontainer und vergleiche beide Varianten. Ein Wert auf einem beliebigen äußeren Element muss nicht den Bereich treffen, den du gerade bedienst.

Den Ausgang weiterhin erreichbar lassen

Eine ruhig bleibende Hintergrundseite ist nur ein Teil der Aufgabe. Die Person muss den Filterbereich weiterhin verlassen, schließen oder mit der Tastatur sinnvoll bedienen können. Ein Scrollstopp darf sich nicht wie eine festgefahrene Oberfläche anfühlen. Sichtbare Überschriften und ein eindeutiger Abschluss der Auswahl helfen, die Grenze zu verstehen.

Formuliere im Bauauftrag: „Die lange Filterauswahl soll am Rand nicht unbeabsichtigt den Hintergrund verschieben. Alle Filter und der Weg zurück zu den Ergebnissen bleiben per Tastatur und Touch erreichbar. Prüfe die Zielbrowser und dokumentiere abweichendes Verhalten.“ Damit steht ein überprüfbares Bedienziel im Mittelpunkt, nicht bloß das Vorhandensein einer CSS-Zeile.

Mehr als eine Mausradprobe durchführen

Scrolle langsam und schnell bis zum oberen und unteren Ende. Wechsle anschließend bewusst in die Ergebnisse und kontrolliere, ob diese normal erreichbar bleiben. Wiederhole den Versuch mit Tastatur sowie in einer mobilen Ansicht und, soweit verfügbar, auf einem tatsächlichen Touchgerät. Ein schmaler Browser allein simuliert nicht jede Touchgeste. Notiere die geprüften Umgebungen ehrlich. So lässt sich beurteilen, ob die Begrenzung der Bewegung die konkrete Oberfläche wirklich verständlicher macht.