Scrollen beim Andocken nach Layoutänderungen

Ab Chrome 81 müssen Sie keine Event-Listener mehr hinzufügen, um das erneute Andocken zu erzwingen.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

Mit CSS Scroll Snap können Webentwickler gut kontrollierte Scrollvorgänge erstellen, indem sie Scroll-Snapping-Positionen deklarieren. Ein Nachteil der aktuellen Implementierung ist, dass das Scroll-Snapping nicht gut funktioniert, wenn sich das Layout ändert, z. B. wenn die Größe des Darstellungsbereichs angepasst oder das Gerät gedreht wird. Dieses Problem wurde in Chrome 81 behoben.

Interoperabilität

Viele Browser bieten grundlegende Unterstützung für CSS Scroll Snap. Weitere Informationen finden Sie unter Can I use CSS Scroll Snap?.

Chrome ist derzeit der einzige Browser, in dem das Scroll-Snapping nach Layoutänderungen implementiert ist. Für Firefox ist ein Ticket zur Implementierung dieser Funktion offen und auch für Safari ist ein Ticket offen, um das erneute Einrasten nach Änderungen am Inhalt eines Scrollers zu ermöglichen. Derzeit können Sie dieses Verhalten simulieren, indem Sie den folgenden Code zu Ereignis-Listenern hinzufügen, um das Einrasten zu erzwingen: javascript scroller.scrollBy(0,0); Dadurch wird jedoch nicht garantiert, dass der Scroller zum selben Element zurückkehrt.

Hintergrund

CSS Scroll Snap

Mit der CSS-Funktion „Scroll Snap“ können Webentwickler durch Deklarieren von Scroll-Snap-Positionen gut kontrollierte Scroll-Vorgänge erstellen. Diese Positionen sorgen dafür, dass scrollbare Inhalte richtig mit ihrem Container ausgerichtet werden, um Probleme mit ungenauem Scrollen zu vermeiden. Mit anderen Worten:

  • Verhindert ungünstige Scrollpositionen beim Scrollen.
  • Erzeugt den Effekt des Durchblätterns von Inhalten.

Paginierte Artikel und Bilderkarusselle sind zwei gängige Anwendungsfälle für Scroll-Snaps.

Beispiel für CSS-Scroll-Snap
Beispiel für CSS-Scroll-Snapping. Am Ende des Scrollens wird die horizontale Mitte des Bildes an der horizontalen Mitte des Scroll-Containers ausgerichtet.

Mängel

Beim Ändern der Größe eines Fensters gehen die Andockpositionen verloren.

Scroll-Snapping ermöglicht es Nutzern, mühelos durch Inhalte zu navigieren. Da es sich jedoch nicht an Änderungen an Inhalten und Layout anpassen kann, werden einige der potenziellen Vorteile eingeschränkt. Wie im Beispiel oben zu sehen ist, müssen Nutzer die Scrollpositionen bei jeder Größenänderung eines Fensters neu anpassen, um das zuvor eingerastete Element zu finden. Häufige Szenarien, die zu einer Layoutänderung führen, sind:

  • Größe eines Fensters ändern
  • Gerät drehen
  • Entwicklertools öffnen

Die ersten beiden Szenarien machen CSS Scroll Snap für Nutzer weniger attraktiv und das dritte ist ein Albtraum für Entwickler beim Debuggen. Entwickler müssen diese Einschränkungen auch berücksichtigen, wenn sie eine dynamische Umgebung schaffen möchten, die Aktionen wie das Hinzufügen, Entfernen oder Verschieben von Inhalten unterstützt.

Eine häufige Lösung besteht darin, Listener hinzuzufügen, die einen programmatischen Scrollvorgang über JavaScript ausführen, um das Andocken zu erzwingen, wenn eine der genannten Layoutänderungen eintritt. Diese Umgehungslösung kann ineffektiv sein, wenn der Nutzer erwartet, dass der Scroller zum vorherigen Inhalt zurückkehrt. Eine weitere Verarbeitung mit JavaScript scheint den Zweck dieser CSS-Funktion fast zunichte zu machen.

In Chrome 81 integrierte Unterstützung für das erneute Andocken nach Layoutänderungen

Die genannten Mängel bestehen in Chrome 81 nicht mehr: Scroller bleiben auch nach einer Layoutänderung eingerastet. Die Scrollpositionen werden nach einer Layoutänderung neu bewertet und bei Bedarf wird zur nächstgelegenen Einrastposition zurückgekehrt. Wenn der Scroller zuvor an einem Element ausgerichtet war, das nach der Layoutänderung noch vorhanden ist, wird versucht, ihn wieder daran auszurichten. Achten Sie darauf, was passiert, wenn sich das Layout im folgenden Beispiel ändert.

Position des Snaps verloren
Beim Drehen eines Geräts werden die Andockpositionen in Chrome 80 nicht beibehalten. Nachdem Sie zur Folie mit NOPE gescrollt und die Ausrichtung des Geräts vom Hoch- ins Querformat geändert haben, wird ein leerer Bildschirm angezeigt. Das bedeutet, dass die Scroll-Snap-Position verloren gegangen ist.
Snap-Position beibehalten
Beim Drehen eines Geräts bleiben die Andockpositionen in Chrome 81 erhalten. Die Folie mit NOPE bleibt im Blickfeld, auch wenn sich die Ausrichtung des Geräts mehrmals ändert.

Weitere Informationen finden Sie in der Spezifikation für das erneute Ausrichten nach Layoutänderungen.

Beispiel: Fixierte Scrollleisten

Mit „Snap after layout changes“ können Entwickler mit wenigen Zeilen CSS Sticky-Scrollbalken implementieren:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

Möchtest du mehr erfahren? Hier finden Sie eine Demo-Chat-Benutzeroberfläche.

Wenn eine neue Nachricht hinzugefügt wird, wird das Andocken neu ausgelöst, sodass das Element in Chrome 81 unten bleibt.

Zukünftige Funktionen

Alle Scroll-Effekte, die das Einrasten neu auslösen, sind derzeit sofort wirksam. Möglicherweise wird in Zukunft auch das Einrasten mit Effekten für sanftes Scrollen unterstützt. Weitere Informationen finden Sie unter Spezifikationsproblem.

Feedback

Ihr Feedback ist von unschätzbarem Wert, um das erneute Andocken nach Layoutänderungen zu verbessern. Probieren Sie es also aus und teilen Sie den Chromium-Entwicklern mit, was Sie davon halten.