Ab Chrome 81 müssen Sie keine Event-Listener mehr hinzufügen, um ein erneutes Anfügen zu erzwingen.
Mit CSS Scroll Snap können Webentwickler das Scrollen durch die Angabe von Positionen, an denen das Scroll-Andocken funktioniert, problemlos steuern. Ein Nachteil der aktuellen Implementierung ist, dass das Scrollen 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 eine grundlegende Unterstützung für CSS Scroll Snap. Weitere Informationen finden Sie unter Kann ich CSS Scroll Snap verwenden?.
Chrome ist derzeit der einzige Browser, in dem das Scroll-Andocken nach Layoutänderungen implementiert ist. In Firefox ist ein Ticket für die Implementierung verfügbar und Safari hat auch ein offenes Ticket, mit dem sich das Video neu ausrichten lässt, wenn sich der Inhalt eines Scrollers ändert. Derzeit können Sie dieses Verhalten simulieren, indem Sie den Event-Listenern den folgenden Code hinzufügen, um die Ausführung des Andockens zu erzwingen:
javascript
scroller.scrollBy(0,0);
Dies garantiert jedoch nicht, dass der Scroller zum selben Element zurückspringt.
Hintergrund
CSS „Scroll Snap“
Mit der CSS-Funktion „Scroll Snap“ können Webentwickler ein gut gesteuertes Scrollen erstellen, indem sie die entsprechenden Positionen angeben. Durch diese Positionen wird sichergestellt, dass scrollbare Inhalte richtig auf den Container ausgerichtet sind, um Probleme durch ungenaues Scrollen zu vermeiden. Mit anderen Worten, Scroll-Snap:
- Verhindert ungünstige Scrollpositionen beim Scrollen.
- Erzeugt den Effekt, dass sich der Inhalt durchblättert.
Artikel mit Seitenumbruch und Bilderkarussells sind zwei häufige Anwendungsfälle für Scroll-Snaps.
Schwächen
Die Funktion „Scroll-Snap“ ermöglicht es Nutzern, sich mühelos durch Inhalte zu bewegen. Da sie sich jedoch nicht an Änderungen in Inhalt und Layout anpassen können, sind einige ihrer potenziellen Vorteile nicht möglich. Wie im Beispiel oben gezeigt, müssen Nutzer die Scrollpositionen neu anpassen, wenn sie die Größe eines Fensters ändern, um das zuvor angedockte Element zu finden. 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 ansprechend und das dritte ist für Entwickler beim Debugging ein Albtraum. Entwickler müssen diese Mängel auch berücksichtigen, wenn sie versuchen, eine dynamische Umgebung zu schaffen, die Aktionen wie das Hinzufügen, Entfernen oder Verschieben von Inhalten unterstützt.
Eine häufige Lösung besteht darin, Listener hinzuzufügen, die ein programmatisches Scrollen über JavaScript ausführen, um die Ausführung des Andockens zu erzwingen, wenn eine der genannten Layoutänderungen vorgenommen wird. Diese Problemumgehung kann ineffektiv sein, wenn der Nutzer erwartet, dass der Scroller zum gleichen Inhalt zurückkehrt wie zuvor. Jede weitere Handhabung mit JavaScript scheint den Zweck dieser CSS-Funktion fast zu verfehlen.
Integrierte Unterstützung für das erneute Andocken nach Layoutänderungen in Chrome 81
Die genannten Mängel sind in Chrome 81 nicht mehr vorhanden: Scroller bleiben auch nach einem Layoutwechsel fixiert. Sie werten die Scrollpositionen nach Änderung des Layouts neu aus und rasten bei Bedarf wieder an der nächstgelegenen Andockposition ein. Wenn der Scroller zuvor an einem Element angedockt wurde, das nach der Layoutänderung noch vorhanden ist, versucht er, wieder dorthin zurückzukehren. Im folgenden Beispiel sehen Sie, was passiert, wenn sich das Layout ändert.
NOPE gescrollt und die Geräteausrichtung von Hoch- in Querformat geändert haben, wird ein leerer Bildschirm angezeigt, was darauf hinweist, dass die Position zum Scrollen verloren gegangen ist.
NOPE bleibt sichtbar, auch wenn sich die Geräteausrichtung mehrmals ändert.
Weitere Informationen finden Sie in der Spezifikation für das erneute Andocken nach Layoutänderungen.
Beispiel: Fixierte Bildlaufleisten
Mit der Funktion „Nach Layoutänderungen andocken“ können Entwickler fixierte Bildlaufleisten mit einigen CSS-Zeilen implementieren:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Möchtest du mehr erfahren? Visuelle Elemente finden Sie auf der Demo-Chat-UI.
Zukünftige Arbeiten
Alle neuen Scroll-Effekte für das erneute Andocken sind derzeit sofort zu sehen. Ein möglicher Nachfolger besteht darin, das erneute Andocken mit weichen Scrolleffekten zu unterstützen. Weitere Informationen finden Sie unter Spezifikationsproblem.
Feedback
Dein Feedback ist von unschätzbarem Wert für das erneute Andocken nach Layoutänderungen. Probiere es aus und teile den Chromium-Entwicklern mit, was du davon hältst.