Sie und Ihre Nutzer möchten, dass mobile Web-Apps auf Berührungen reagieren und flüssig scrollen. Die Entwicklung sollte einfach sein, aber leider wird in der TouchEvent-Spezifikation nicht festgelegt, wie mobile Webbrowser auf Touch-Ereignisse während des Scrollens reagieren. Daher lassen sich die Ansätze grob in vier Kategorien einteilen. Diese Situation verdeutlicht die grundlegende Spannung zwischen der Bereitstellung einer flüssigen Scrollfunktion und der Aufrechterhaltung der Entwicklerkontrolle.
Vier verschiedene Modelle für die Verarbeitung von Touch-Ereignissen?
Die Verhaltensunterschiede zwischen den Browsern lassen sich in vier Modelle unterteilen.
Normale synchrone Ereignisverarbeitung
Touchmove-Ereignisse werden während des Scrollens gesendet und jede Scroll-Aktualisierung wird blockiert, bis die Touchmove-Verarbeitung abgeschlossen ist. Das ist gut, da es am einfachsten zu verstehen und am leistungsstärksten ist. Es ist jedoch schlecht für die Scrollleistung, da jeder Frame während des Scrollens im Hauptthread blockiert werden muss.
Browser: Android-Browser (Android 4.0.4, 4.3), Mobile Safari (beim Scrollen von Div)
Asynchrone Verarbeitung von „touchmove“
Touchmove-Ereignisse werden während des Scrollens gesendet, das Scrollen kann jedoch asynchron erfolgen (das Touchmove-Ereignis wird ignoriert, nachdem das Scrollen begonnen hat). Dies kann dazu führen, dass Ereignisse doppelt verarbeitet werden. Wenn Sie beispielsweise nach dem Aufruf von preventDefault für das Ereignis durch die Website, wodurch der Browser angewiesen wird, das Ereignis nicht zu verarbeiten, weiter scrollen.
Browser: Mobile Safari (beim Scrollen des Dokuments), Firefox
„touchmove“-Ereignisse werden beim Scrollen unterdrückt
„touchmove“-Ereignisse werden nach dem Beginn des Scrollens nicht gesendet und erst nach dem „touchend“-Ereignis fortgesetzt. Bei diesem Modell ist es schwer, zwischen einer statischen Berührung und einem Scrollen zu unterscheiden.
Browser: Samsung Browser (mousemove-Ereignisse werden gesendet)
Touchcancel beim Start des Scrollens
Sie können nicht beides haben – flüssiges Scrollen und Entwicklersteuerung. Dieses Modell verdeutlicht den Kompromiss zwischen flüssigem Scrollen und Ereignisverarbeitung, ähnlich der Semantik der Pointer Events-Spezifikation. Einige Funktionen, bei denen der Finger verfolgt werden muss, z. B. „Zum Aktualisieren ziehen“, sind nicht möglich.
Browser: Chrome Desktop M32+, Chrome Android
Warum die Änderung?
In Chrome für Android wird derzeit das alte Chrome-Modell verwendet: „touchcancel“ beim Scrollstart. Dadurch wird die Scrollleistung verbessert, aber es kann zu Verwirrung bei Entwicklern kommen. Insbesondere sind sich einige Entwickler des touchcancel-Ereignisses oder des Umgangs damit nicht bewusst, was dazu geführt hat, dass einige Websites nicht mehr richtig funktionieren. Noch wichtiger ist, dass eine ganze Klasse von UI-Scrolling-Effekten und ‑Verhaltensweisen, wie Pull-to-Refresh, Hidey Bars und Snap Points, nur schwer oder gar nicht gut implementiert werden können.
Anstatt speziell hartcodierte Funktionen zur Unterstützung dieser Effekte hinzuzufügen, konzentriert sich Chrome darauf, Plattformprimitive hinzuzufügen, mit denen Entwickler diese Effekte direkt implementieren können. Eine allgemeine Darstellung dieser Philosophie finden Sie unter A Rational Web Platform.
Neues Modell von Chrome: Das gedrosselte asynchrone Touchmove-Modell
In Chrome wird ein neues Verhalten eingeführt, um die Kompatibilität mit Code zu verbessern, der für andere Browser beim Scrollen geschrieben wurde. Außerdem werden so andere Szenarien ermöglicht, die davon abhängen, dass beim Scrollen „touchmove“-Ereignisse empfangen werden. Diese Funktion ist standardmäßig aktiviert. Sie können sie mit dem folgenden Flag deaktivieren: chrome://flags\#touch-scrolling-mode.
Das neue Verhalten:
- Der erste „touchmove“-Vorgang wird synchron gesendet, damit der Scrollvorgang abgebrochen werden kann.
- Während des aktiven Scrollens
- „touchmove“-Ereignisse werden asynchron gesendet.
- gedrosselt auf 1 Ereignis pro 200 ms oder wenn eine CSS-Toleranzregion von 15 px überschritten wird
- Event.cancelable ist false.
- Andernfalls werden „touchmove“-Ereignisse wie gewohnt synchron ausgelöst, wenn das aktive Scrollen beendet wird oder nicht möglich ist, weil das Scrolllimit erreicht wurde.
- Ein „touchend“-Ereignis tritt immer auf, wenn der Nutzer den Finger anhebt.
Sie können diese Demo in Chrome für Android ausprobieren und das Flag chrome://flags\#touch-scrolling-mode ein- und ausschalten, um den Unterschied zu sehen.
Ihre Meinung zählt
Das asynchrone Touchmove-Modell kann die browserübergreifende Kompatibilität verbessern und eine neue Klasse von Touch-Gesten-Effekten ermöglichen. Wir sind gespannt auf das Feedback der Entwickler und darauf, was ihr damit anstellen könnt.