Sie und Ihre Nutzer möchten mobile Web-Apps, die auf eine Berührung reagieren und reibungslos scrollen können. Die Entwicklung der Browser sollte einfach sein. Wie mobile Webbrowser beim Scrollen auf Touch-Ereignisse reagieren, wird in der TouchEvent-Spezifikation als Implementierungsdetail beibehalten. Daher können Ansätze ungefähr in vier Kategorien unterteilt werden. Dies führt zu einem fundamentalen Spannungen zwischen der Bereitstellung eines flüssigen Scrollvorgangs und der Aufrechterhaltung der Kontrolle durch die Entwickler.
Vier verschiedene Modelle zur Verarbeitung von Berührungsereignissen?
Die Verhaltensunterschiede der Browser lassen sich in vier Modelle unterteilen.
Normale synchrone Ereignisverarbeitung
Touchmove-Ereignisse werden während des Scrollens gesendet und jedes Scroll-Update wird blockiert, bis die Touchmove-Verarbeitung abgeschlossen ist. Dies ist sowohl der einfachste zu verstehende als auch leistungsfähigste, aber schlecht für die Scrollleistung, da jeder Frame während des Scrollens den Hauptthread blockieren muss.
Browser: Android-Browser (Android 4.0.4, 4.3), Safari für Mobilgeräte (beim Scrollen von div)
Asynchrone Touchmove-Verarbeitung
Touchmove-Ereignisse werden während des Scrollens gesendet, das Scrollen kann jedoch asynchron erfolgen (das Touchmove-Ereignis wird nach Beginn des Scrollens ignoriert). Dies kann zu einer doppelten Verarbeitung von Ereignissen führen. Beispielsweise kann das Scrollen fortgesetzt werden, nachdem auf der Website eine Aktion mit „touchmove“ ausgeführt wurde, und preventDefault für das Ereignis aufgerufen wird, sodass der Browser das Ereignis nicht verarbeiten soll.
Browser: Mobile Safari (beim Scrollen des Dokuments), Firefox
Berührung beim Scrollen unterdrückt
Touchmove-Ereignisse werden erst nach Beginn des Scrollens gesendet und erst nach dem Touchend-Ereignis fortgesetzt. Bei diesem Modell ist es schwer, zwischen einer unbewegten Berührung und einer Scrollbewegung zu unterscheiden.
Browser: Samsung-Browser (mousemove-Ereignisse gesendet)
Touchcancel beim Scrollen
Beides ist nicht möglich: flüssiges Scrollen und Entwicklersteuerung. Dieses Modell verdeutlicht den Kompromiss zwischen reibungslosem Scrollen und Ereignisverarbeitung, ähnlich der Semantik der Spezifikation Pointer-Ereignisse. Einige Funktionen, bei denen möglicherweise ein Finger-Tracking erforderlich ist, wie das Ziehen zum Aktualisieren, sind nicht möglich.
Browser: Chrome Desktop M32 und höher, Chrome Android
Warum eine Änderung?
In Chrome für Android wird derzeit das alte Modell von Chrome verwendet: Touchcancel beim Scrollen. Dadurch wird die Scrollleistung verbessert, die Entwickler können jedoch nicht verwirrt werden. Insbesondere wissen einige Entwickler nicht, dass das Touchcancel-Ereignis vorliegt oder wie sie damit umgehen sollen, was dazu geführt hat, dass einige Websites nicht mehr funktionieren. Noch wichtiger ist, dass sich eine ganze Klasse von Scroll-Effekten und -Verhalten auf der Benutzeroberfläche wie Zum Aktualisieren durch Ziehen, versteckte Balken und Snap-Punkte schwer oder gar nicht gut implementieren lässt.
Anstatt speziell hartcodierte Funktionen hinzuzufügen, um diese Effekte zu unterstützen, versucht Chrome, sich auf das Hinzufügen von Plattform-Primitiven zu konzentrieren, mit denen Entwickler diese Effekte direkt implementieren können. Eine allgemeine Darstellung dieser Philosophie finden Sie unter Eine rationale Webplattform.
Das neue Chrome-Modell: das gedrosselte asynchrone Touchmove-Modell
In Chrome wird ein neues Verhalten eingeführt, durch das beim Scrollen die Kompatibilität mit Code verbessert wird, der für andere Browser geschrieben wurde. Außerdem werden auch andere Szenarien ermöglicht, in denen Touchmove-Ereignisse beim Scrollen erforderlich sind. Dieses Feature ist standardmäßig aktiviert und kann mit dem Flag chrome://flags\#touch-scrolling-mode deaktiviert werden.
Das neue Verhalten ist:
- Der erste Touchmove wird synchron gesendet, damit das Scrollen abgebrochen werden kann.
- Während des aktiven Scrollens
- Touchmove-Ereignisse werden asynchron gesendet.
- throttled auf ein Ereignis pro throttled oder wenn eine CSS-Slop-Region von throttled überschritten wird
- Event.cancelable ist false.
- Andernfalls werden Touchmove-Ereignisse synchron ausgelöst, wenn das aktive Scrollen beendet wird oder nicht möglich ist, weil das Scroll-Limit erreicht wurde.
- Ein Touchend-Ereignis tritt immer auf, wenn der Nutzer seinen Finger anhebt.
Sie können diese Demo in Chrome für Android ausprobieren und das chrome://flags\#touch-scrolling-mode-Flag umschalten, um den Unterschied zu sehen.
Ihre Meinung zählt
Das Async Touchmove-Modell kann die browserübergreifende Kompatibilität verbessern und eine neue Klasse von Touch-Gesten-Effekten ermöglichen. Wir interessieren uns dafür, was Entwickler denken und welche kreativen Möglichkeiten es bietet.