Scrollen beim Andocken nach Layoutänderungen

Ab Chrome 81 müssen Sie keine Ereignis-Listener mehr hinzufügen, um ein Erzwingen des Neu-Snappens zu erzwingen.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

Mit CSS Scroll Snap können Webentwickler ein gut kontrolliertes Scrollen gestalten, indem sie Scroll-Andocken angeben. Ein Nachteil der aktuellen Implementierung ist, dass das Scroll-Snapping nicht gut funktioniert, wenn sich das Layout ändert, z. B. wenn der Darstellungsbereich neu skaliert oder das Gerät gedreht wird. Dieser Mangel wurde in Chrome 81 behoben.

Interoperabilität

Viele Browser unterstützen CSS Scroll Snap grundsätzlich. Weitere Informationen finden Sie unter Kann ich CSS-Scroll Snap verwenden?

Chrome ist derzeit der einzige Browser, der nach Layoutänderungen ein Scroll-Snapping implementiert. Für Firefox gibt es ein Ticket zur Implementierung dieser Funktion und für Safari ein Ticket für das erneute Anpinnen nach einer Änderung des Inhalts eines Scrollers. Derzeit können Sie dieses Verhalten simulieren, indem Sie Ereignis-Listenern den folgenden Code hinzufügen, um ein Anspringen zu erzwingen: javascript scroller.scrollBy(0,0); Dies ist jedoch keine Garantie dafür, dass der Scroller wieder zum selben Element springt.

Hintergrund

CSS-Scroll-Snap

Mit der CSS-Scroll-Snap-Funktion können Webentwickler gut steuerbare Scrollfunktionen erstellen, indem sie Scroll-Snap-Positionen angeben. Durch diese Positionen wird sichergestellt, dass scrollbare Inhalte richtig mit ihrem Container ausgerichtet sind, um Probleme mit ungenauem Scrollen zu vermeiden. Mit anderen Worten:

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

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

Beispiel für CSS-Scroll-Snapping
Beispiel für CSS-Scroll-Snap. Am Ende des Scrollens eines Bildes ist die horizontale Mitte des Bilds an der horizontalen Mitte des Scrollcontainers ausgerichtet.

Mängel

Andockpositionen gehen verloren, wenn die Größe eines Fensters angepasst wird.

Mit dem Scroll-Snapping können Nutzer mühelos durch Inhalte scrollen. Da sich die Funktion jedoch nicht an Änderungen von Inhalten und Layout anpassen lässt, gehen einige potenzielle Vorteile verloren. Wie im Beispiel oben gezeigt, müssen Nutzer die Scrollpositionen jedes Mal neu anpassen, wenn die Größe eines Fensters geändert wird, um das zuvor angepinnte Element zu finden. Hier einige häufige Szenarien, die zu Layoutänderungen führen:

  • Fenstergröße ändern
  • Gerät drehen
  • Entwicklertools öffnen

Die ersten beiden Szenarien machen CSS Scroll Snap für Nutzer weniger attraktiv und das dritte Szenario ist ein Albtraum für Entwickler beim Entfernen von Fehlern. Entwickler müssen diese Mängel 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 gängige Lösung besteht darin, Listener hinzuzufügen, die ein programmatisches Scrollen über JavaScript ausführen, um das Andocken zu erzwingen, wenn eine der genannten Layoutänderungen auftritt. Diese Problemumgehung kann ineffektiv sein, wenn der Nutzer erwartet, dass der Scroller wieder zum gleichen Inhalt wie zuvor springt. Eine weitere Verarbeitung mit JavaScript würde den Zweck dieser CSS-Funktion fast zunichte machen.

Integrierte Unterstützung für das erneute Anpinnen nach Layoutänderungen in Chrome 81

Diese Mängel sind in Chrome 81 nicht mehr vorhanden: Scrollbalken bleiben auch nach dem Ändern des Layouts angedockt. Nach dem Ändern des Layouts werden die Scrollpositionen neu bewertet und bei Bedarf wieder an der nächsten Snap-Position angedockt. Wenn der Scroller zuvor an ein Element ausgerichtet wurde, das nach der Layoutänderung noch vorhanden ist, versucht er, wieder dorthin zurückzukehren. Im folgenden Beispiel wird gezeigt, was passiert, wenn sich das Layout ändert.

Snap-Position verloren
Beim Drehen eines Geräts werden die Andockpositionen in Chrome 80 nicht beibehalten. Nachdem Sie zur Folie NOPE gescrollt und die Geräteausrichtung von Hoch- in Querformat geändert haben, wird ein leerer Bildschirm angezeigt, was darauf hinweist, dass die Scroll-Snap-Position verloren gegangen ist.
Snap-Position beibehalten
Wenn Sie ein Gerät drehen, bleiben die Anlegepositionen in Chrome 81 erhalten. Die Folie mit dem Text NOPE bleibt sichtbar, obwohl sich die Geräteausrichtung mehrmals ändert.

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

Beispiel: Feststehende Bildlaufleisten

Mit „An Layoutänderungen andocken“ können Entwickler mit wenigen Zeilen CSS scrollbare Elemente implementieren, die an einer bestimmten Position bleiben:

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

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

Möchten Sie mehr erfahren? Visuelle Elemente findest du in der folgenden Demo-Chat-UI.

Wenn Sie eine neue Nachricht hinzufügen, wird in Chrome 81 ein Neu-Snapping ausgelöst, wodurch sie unten fixiert wird.

Zukünftige Arbeit

Alle Scrolleffekte für das erneute Anpinnen sind derzeit sofort sichtbar. Eine mögliche Folgemaßnahme ist die Unterstützung des erneuten Anpinnens mit effektivem Scrollen. Weitere Informationen finden Sie unter Spezifikationsproblem.

Feedback

Ihr Feedback ist für uns sehr wertvoll, damit wir das Anpassen nach Layoutänderungen verbessern können. Probieren Sie es also aus und teilen Sie uns Ihre Meinung mit.