Ab Chrome 81 müssen Sie keine Ereignis-Listener mehr hinzufügen, um die entriegeln.
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">Schwachstellen
<ph type="x-smartling-placeholder">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:
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">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.