Scrollen beim Andocken nach Layoutänderungen

Ab Chrome 81 müssen Sie keine Ereignis-Listener mehr hinzufügen, um die entriegeln.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

CSS-Scroll-Snap ermöglicht es Webentwicklern, ein gut kontrolliertes Scrolling-Erlebnis zu schaffen, und scrollen können. Ein Nachteil der derzeitigen Implementierung ist, Das Anschließen von Seiten funktioniert nicht gut, wenn sich das Layout ändert, zum Beispiel, wenn der Darstellungsbereich oder das Gerät wird gedreht. Dieser Fehler wurde in Chrome 81 behoben.

Interoperabilität

Viele Browser bieten grundlegende Unterstützung für CSS Scroll Snap. Weitere Informationen finden Sie unter Kann ich CSS verwenden? Scrollen Sie zu Snap?, um weitere Informationen zu erhalten.

Chrome ist derzeit der einzige Browser, in dem das Scroll-Snap nach dem Layout implementiert werden kann Änderungen. Firefox hat eine Ticket offen für und Safari auch ein offenes Ticket für einen erneuten Schnappschuss ändert sich der Inhalt des Scrollers. Vorerst können Sie dieses Verhalten simulieren, indem Sie folgenden Code an Ereignis-Listener, um die Ausführung eines Andockens zu erzwingen: javascript scroller.scrollBy(0,0); Dies garantiert jedoch nicht, dass der Scroller wieder in den -Elements.

Hintergrund

CSS-Scroll-Snap

Mit der CSS-Funktion „Scroll Snap“ können Webentwickler durch das Deklarieren von Scroll-Andocken. Diese Positionen dass scrollbarer Inhalt richtig am Container ausgerichtet ist, Probleme des ungenauen Scrollens zu vermeiden. Mit anderen Worten, Scroll-Snap:

  • Verhindert unpassende Scrollpositionen beim Scrollen.
  • Erzeugt den Effekt des Durchblättern von Inhalten.

Artikel in fortlaufender Sequenz und Bilderkarussells sind zwei häufige Anwendungsfälle für Scrollen. Schnappschüsse.

<ph type="x-smartling-placeholder">
</ph> Beispiel für ein CSS-Scroll-Snap
Beispiel für ein CSS-Scroll-Snap. Am Ende des Das Scrollen der horizontalen Mitte eines Bildes ist an der horizontalen Mitte ausgerichtet. des Scroll-Containers.

Schwachstellen

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. Andockpositionen gehen verloren, wenn die Größe eines Fensters angepasst wird.

Dank Scroll-Snap-to-Action können Nutzer mühelos durch Inhalte navigieren, Unfähigkeit, sich an Inhalts- und Layoutänderungen anzupassen, Vorteile. Wie im Beispiel zu sehen ist, müssen Nutzende die Scrollpositionen jedes Mal neu anpassen, wenn die Größe eines Fensters das zuvor angedockte Element zu finden. Einige häufige Szenarien, die ein Layout verursachen Änderung:

  • Größe eines Fensters ändern
  • Drehen eines Geräts
  • Entwicklertools öffnen

Die ersten beiden Szenarien machen CSS Scroll Snap für Nutzer weniger attraktiv, Das dritte ist ein Albtraum für Entwickler bei der Fehlerbehebung. Entwickler müssen außerdem wenn Sie versuchen, ein dynamisches Erlebnis zu schaffen, unterstützt Aktionen wie das Hinzufügen, Entfernen oder Verschieben von Inhalten.

Eine gängige Lösung besteht darin, Listener hinzuzufügen, die ein programmatisches Scrollen über JavaScript, um die Ausführung des Andockens zu erzwingen, wenn eines der genannten Layouts dass es zu Veränderungen kommt. Diese Behelfslösung kann ineffektiv sein, wenn der Nutzer um zum vorherigen Inhalt zurückzukehren. Jede weitere Verarbeitung mit JavaScript scheint den Zweck dieser CSS-Funktion fast zu übertreffen.

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

Die genannten Schwachstellen gibt es in Chrome 81 nicht mehr: Scroller bleiben erhalten. auch nach einem Layout anders angedockt. Sie bewerten die Scrollpositionen neu, das Layout ändern und wieder an der nächstgelegenen Andockposition andocken, falls erforderlich. Wenn wurde der Scroller zuvor an ein Element ausgerichtet, das nach der Layoutänderung versuchen, dann versucht der Scroller, sich wieder daran zu fixieren. Achten Sie auf was passiert, wenn sich das Layout Beispiel:

Andockposition verloren
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Beim Drehen eines Geräts bleiben die Andockpositionen in Chrome 80 nicht erhalten. Nachdem Sie zur Folie „NOPE“ gescrollt und die Geräteausrichtung geändert haben vom Hoch- ins Querformat wechseln, ist ein leerer Bildschirm zu sehen, was bedeutet, Die Scroll-Snap-Position ist verloren gegangen.
Andockposition beibehalten
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Beim Drehen eines Geräts werden die Andockpositionen in Chrome 81 beibehalten. Die Folie, die sagt, dass „NOPE“ im Bild bleibt, obwohl sich die Ausrichtung des Geräts mehrmals ändert.

Weitere Informationen finden Sie im Abschnitt Erneutes Andocken nach Layoutänderungen finden Sie weitere Informationen Details.

Beispiel: Fixierte Bildlaufleisten

Mit der Funktion „Nach Layoutänderungen andocken“ können Entwickler mit nur wenigen Zeilen im CSS:

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

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

Möchten Sie mehr erfahren? Sehen Sie sich den folgenden Demo-Chat an: UI für visuelle Elemente.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. Durch das Hinzufügen einer neuen Nachricht wird ein erneutes Andocken ausgelöst, wodurch sie unten in Chrome 81.

Zukünftige Arbeiten

Alle Scroll-Effekte mit erneutem Andocken werden derzeit sofort angezeigt. eine mögliche Nachfass-E-Mail um ein erneutes Andocken durch reibungsloses Scrollen zu unterstützen Effekte. Siehe Spezifikationsproblem .

Feedback

Dein Feedback hilft uns dabei, die Funktion nach Layoutänderungen zu verbessern. Fahre fort. und probieren Sie es aus und lassen Sie die Chromium-Entwickler wissen, was Sie denken.