Ab Chrome 81 müssen keine Ereignis-Listener mehr hinzugefügt werden, um das Zurücksetzen zu erzwingen.
CSS-Bildlaufanpassung
permite a los desarrolladores Netz crear experiencias de desplazamiento bien controladas al declarar posiciones de ajuste de desplazamiento. Una deficiencia de la implementación actual es que el ajuste de desplazamiento no funciona bien cuando cambia el diseño, como cuando se cambia el tamaño de la ventana gráfica o se gira el dispositivo. Esta deficiencia se corrige en Chrome 81.
Interoperabilität
Viele Browser tienen soporte básico para CSS Scrollen Snap. Ver Kann ich CSS Scroll Snap verwenden? für mehr Informationen.
Chrome es actualmente el único Browser que implementa el ajuste de desplazamiento después de los cambios de diseño. Firefox tiene un
Fahrkarte offen, dies umzusetzen und Safari hat auch eine
Fahrkarte para volver a ajustar después de que cambie el Inhalt de un desplazador. Por ahora, puede simular este comportamiento agregando el siguiente código a los detectores de eventos para forzar la ejecución de un ajuste:
scroller.scrollBy(0,0);Dies garantiert jedoch nicht, dass der Scroller zum selben Element zurückkehrt.
Hintergrund
CSS-Bildlaufanpassung
Mit der CSS-Scroll-Snap-Funktion können Webentwickler durch Deklarieren von Scroll-Snap-Positionen gut kontrollierte Scroll-Erlebnisse erstellen. Diese Positionen stellen sicher, dass der scrollbare Inhalt ordnungsgemäß an seinem Container ausgerichtet ist, um ungenaue Bildlaufprobleme zu beheben. Mit anderen Worten, Bildlaufanpassung:
- Vermeiden Sie beim Scrollen unangenehme Bildlaufpositionen.
- Erzeugt den Effekt des Paging des Inhalts.
Paginierte Artikel und Bildkarusselle sind zwei häufige Anwendungsfälle für das Scrollen von Schnappschüssen.
Mängel
Fangpositionen gehen beim Ändern der Fenstergröße verloren.
Durch die Anpassung des Bildlaufs können Benutzer mühelos durch Inhalte navigieren. Ihre Unfähigkeit, sich an Änderungen in Inhalt und Layout anzupassen, blockiert jedoch einige der potenziellen Vorteile. Wie in der gezeigt Beispiel
Oben müssen Benutzer die Bildlaufpositionen jedes Mal neu anpassen, wenn sie die Größe eines Fensters ändern, um das zuvor angepasste Element zu finden. Einige häufige Szenarien, die zu Designänderungen führen, sind:
- Ändern Sie die Größe eines Fensters
- Gerät drehen
- Öffnen DevTools
Los dos primeros escenarios hacen que CSS Scroll Snap Sein menos atractivo para los usuarios y el tercero es una pesadilla para los desarrolladores a la hora de depurar. Los desarrolladores también deben considerar estas deficiencias al intentar crear una experiencia dinámica que admita acciones como agregar, eliminar o mover contenido.
Una solución común para esto es agregar oyentes que ejecuten un desplazamiento programático a través de Javascript para forzar la ejecución del ajuste cada vez que ocurra alguno de estos cambios de diseño mencionados. Esta solución puede resultar ineficaz cuando el Nutzername espera que el desplazador vuelva al mismo contenido que antes. Cualquier manejo adicional con Javascript parece casi frustrar el propósito de esta función CSS.
Native Unterstützung für das erneute Optimieren nach Layoutänderungen in Chrome 81
Die oben genannten Mängel bestehen in Chrome 81 nicht mehr - die Schieberegler bleiben auch nach Änderung des Layouts fest. Sie werden die Versatzpositionen nach Änderung ihres Layouts neu bewerten und bei Bedarf an der nächstgelegenen Fangposition neu einrasten. Wenn der Verdränger zuvor an einem Element befestigt war, das nach der Konstruktionsänderung noch vorhanden ist, versucht der Verdränger, zu diesem zurückzukehren. Achten Sie darauf, was passiert, wenn sich das Design im Folgenden ändert
Beispiel.
Einstellposition verloren
Gerät drehen nein Behalten Sie die Fangpositionen in Chrome 80 bei. Nach dem Scrollen zur Folie wird angezeigt NEE Durch Ändern der Ausrichtung des Geräts von Hochformat zu Querformat wird ein leerer Bildschirm angezeigt, der angibt, dass die Position für die Bildlaufeinstellung verloren gegangen ist.
Einstellposition beibehalten
Gerät drehen machen Behalten Sie die Fangpositionen in Chrome 81 bei NEE bleibt auch dann im Blick, wenn sich die Ausrichtung des Geräts mehrmals ändert.
Beobachten Sie die Nach Änderungen der Konstruktionsspezifikation neu einstellen für mehr Details.
Vorsicht: Die Einstellung wird auch ausgeführt, wenn die Seite geladen wird. Dies wirkt sich auf den anfänglichen Versatzversatz der Schieberegler aus, die die Versatzanpassungsfunktion verwenden.
Con «Ajustar después de cambios de diseño», los desarrolladores pueden implementar Riegel de desplazamiento adhesivas con unas pocas líneas de CSS:
.container {
scroll-snap-type: y proximity;
}.container::after {
scroll-snap-align: Ende;
Anzeige: Block;
}
Möchten Sie mehr erfahren? Siehe folgendes Demo-Chat-Benutzeroberfläche für visuelle Effekte.
Durch das Hinzufügen einer neuen Nachricht wird eine neue Einstellung ausgelöst, die dazu führt, dass sie in Chrome 81 ganz unten bleibt.
Zukünftige Arbeit
Alle Reset-Scrolling-Effekte sind derzeit sofort verfügbar. Ein mögliches Follow-up besteht darin, die Neueinstellung mit zu unterstützen sanfte Bildlaufeffekte. Beobachten Sie die Spezifikationsproblem
für Details.
Feedback
Ihr Feedback ist von unschätzbarem Wert für die Verbesserung der Passform nach Designänderungen. Probieren Sie es aus und Informieren Sie die Chromium-Ingenieure Was denken Sie.
