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 das Scrollen durch Festlegen von Scroll-Snap-Positionen gut steuern. Ein Nachteil der aktuellen Implementierung ist, dass das Scrollen 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 das Scroll-Snapping nach Layoutänderungen implementiert. Für Firefox ist ein Ticket zur Implementierung dieser Funktion offen und für Safari ist ein Ticket zur Neuanpassung nach Änderungen am Inhalt eines Scrollers offen. 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 Scroll-Erlebnisse 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, als würde man durch Inhalte blättern.

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 ist die horizontale Mitte eines Bildes mit der horizontalen Mitte des Scrollcontainers ausgerichtet.

Mängel

Die Andockpositionen gehen verloren, wenn Sie die Größe eines Fensters ändern.

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 sie die Größe eines Fensters ändern, um das zuvor angedockte Element wiederzufinden. Hier einige häufige Szenarien, die zu Layoutänderungen führen:

  • 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 Szenario ist ein Albtraum für Entwickler beim Debuggen. 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 Anpinnen zu erzwingen, wenn eine dieser Layoutänderungen auftritt. Diese Problemumgehung kann ineffektiv sein, wenn der Nutzer erwartet, dass der Scroller wieder zu den vorherigen Inhalten zurückkehrt. 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 treten in Chrome 81 nicht mehr auf: Scrollbalken bleiben auch nach dem Ändern des Layouts angedockt. Nach dem Ändern des Layouts werden die Scrollpositionen neu bewertet und bei Bedarf an der nächsten Snap-Position angedockt. Wenn der Scroller zuvor an einem Element angedockt war, das nach der Layoutänderung noch vorhanden ist, versucht er, wieder daran anzudocken. Sehen Sie sich an, was im folgenden Beispiel passiert, wenn sich das Layout ändert.

Snap-Position verloren
Wenn Sie ein Gerät drehen, werden die Anlegepositionen in Chrome 80 nicht beibehalten. Nachdem Sie zu der Folie mit der NOPE gescrollt und die Geräteausrichtung von Hoch- auf Querformat geändert haben, wird ein leerer Bildschirm angezeigt. Das bedeutet, dass die Position für die automatische Bildlaufanpassung verloren gegangen ist.
Snap-Position beibehalten
Wenn Sie ein Gerät drehen, bleiben die Anlegepositionen in Chrome 81 erhalten. Die Folie mit der Aufschrift NOPE bleibt sichtbar, auch wenn 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 scrollbare Elemente mit wenigen Zeilen CSS implementieren:

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

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

Möchten Sie mehr erfahren? Eine visuelle Darstellung finden Sie in der Demo-Chat-Benutzeroberfläche.

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 im Hilfeartikel Problem mit der Spezifikation.

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.