Sie und Ihre Nutzer wünschen sich mobile Web-Apps, die flüssig auf Berührungen reagieren und scrollen. Die Entwicklung sollte einfach sein, aber leider wird in der TouchEvent-Spezifikation nicht festgelegt, wie mobile Webbrowser auf Touch-Ereignisse beim Scrollen reagieren. Die Ansätze lassen sich daher grob in vier Kategorien unterteilen. Diese Situation zeigt eine grundlegende Spannung zwischen der Bereitstellung einer flüssigen Bildlauffunktion und der Wahrung der Entwicklerkontrolle.
Vier verschiedene Modelle zur 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. Jede Scroll-Aktualisierung wird blockiert, bis die Touchmove-Verarbeitung abgeschlossen ist. Diese Methode ist einfach zu verstehen und leistungsstark, aber schlecht für die Scrollleistung, da jeder Frame beim Scrollen den Hauptthread blockieren muss.
Browser: Android-Browser (Android 4.0.4, 4.3), Mobile Safari (beim Scrollen durch ein Div)
Asynchrone Touchmove-Verarbeitung
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 zu einer doppelten Verarbeitung von Ereignissen führen, z. B. wenn weitergescrollt wird, nachdem die Website etwas mit dem Touchmove-Ereignis getan und preventDefault für das Ereignis aufgerufen hat, um den Browser anzuweisen, es nicht zu verarbeiten.
Browser: Safari für Mobilgeräte (beim Scrollen durch das Dokument), Firefox
Touchmove wird beim Scrollen unterdrückt
Touchmove-Ereignisse werden nicht gesendet, nachdem das Scrollen gestartet wurde, und erst nach dem Touchend-Ereignis fortgesetzt. Bei diesem Modell ist es schwierig, zwischen einer stationären Berührung und einem Scrollen zu unterscheiden.
Browser: Samsung Browser (gesendete MouseMove-Ereignisse)
Touchcancel on scroll start
Sie können nicht beides haben – flüssiges Scrollen und Entwicklersteuerung – und dieses Modell verdeutlicht den Kompromiss zwischen flüssigem Scrollen und Ereignisbehandlung, ähnlich wie die Semantik der Pointer Events-Spezifikation. Einige Funktionen, bei denen der Finger möglicherweise verfolgt werden muss, wie das Ziehen zum Aktualisieren, sind nicht möglich.
Browser: Chrome-Desktop (M32 und höher), Chrome für Android
Warum die Änderung?
Chrome für Android verwendet derzeit das alte Chrome-Modell: „touchcancel“ beim Scrollen. Das verbessert die Scrollleistung, führt aber zu Verwirrung bei Entwicklern. Insbesondere sind einige Entwickler nicht mit dem Ereignis „touchcancel“ oder der Verarbeitung vertraut. Dies hat dazu geführt, dass einige Websites nicht mehr funktionieren. Noch wichtiger ist, dass eine ganze Reihe von UI-Scrolleffekten und -Verhalten wie Ziehen zum Aktualisieren, ausblendbare Balken und Snap-Punkte nur schwer oder gar nicht richtig 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.
Das neue Modell von Chrome: Das Throttled Async Touchmove Model
In Chrome wird ein neues Verhalten eingeführt, das die Kompatibilität mit Code, der für andere Browser geschrieben wurde, beim Scrollen verbessern soll. Außerdem werden andere Szenarien ermöglicht, die vom Empfang von Touchmove-Ereignissen beim Scrollen abhängen. Diese Funktion ist standardmäßig aktiviert und kann mit dem folgenden Flag deaktiviert werden: chrome://flags\#touch-scrolling-mode.
Das neue Verhalten:
- Die erste Touchbewegung wird synchron gesendet, damit das Scrollen abgebrochen werden kann.
- Während des aktiven Scrollens
- Touchmove-Ereignisse werden asynchron gesendet.
- begrenzt auf ein Ereignis pro 200 ms oder wenn ein CSS-Gleitzonenbereich 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 hebt.
In dieser Demo in Chrome für Android können Sie das Flag chrome://flags\#touch-scrolling-mode aktivieren und deaktivieren, um den Unterschied zu sehen.
Ihre Meinung zählt
Das asynchrone Touchmove-Modell hat das Potenzial, die plattformübergreifende Kompatibilität zu verbessern und eine neue Klasse von Touch-Gesteneffekten zu ermöglichen. Wir sind gespannt auf die Meinung der Entwickler und darauf, was Sie damit alles anstellen.