U en uw gebruikers willen mobiele webapps die soepel reageren en scrollen bij aanraking. Het ontwikkelen ervan zou eenvoudig moeten zijn, maar helaas wordt de manier waarop mobiele webbrowsers reageren op aanraakgebeurtenissen tijdens het scrollen overgelaten aan een implementatiedetail in de TouchEvent- specificatie. Hierdoor kunnen benaderingen grofweg worden onderverdeeld in vier categorieën. Deze situatie legt een fundamentele spanning bloot tussen het leveren van soepel scrollen en het behouden van de controle door de ontwikkelaar.
Vier verschillende modellen voor het verwerken van aanraakgebeurtenissen?
De gedragsverschillen tussen de browsers zijn onderverdeeld in vier modellen.
Normale synchrone gebeurtenisverwerking
Touchmove-gebeurtenissen worden verzonden tijdens het scrollen en elke scroll-update wordt geblokkeerd totdat de touchmove-afhandeling is voltooid. Dit is goed omdat het het eenvoudigst te begrijpen en het krachtigst is, maar het is slecht voor de scrollprestaties omdat het betekent dat elk frame tijdens het scrollen op de hoofdthread moet worden geblokkeerd.
Browsers: Android Browser (Android 4.0.4, 4.3), Mobile Safari (bij scrollen door div)
Asynchrone touchmove-verwerking
Touchmove-gebeurtenissen worden verzonden tijdens het scrollen, maar scrollen kan asynchroon verlopen (de touchmove-gebeurtenis wordt genegeerd nadat het scrollen is begonnen). Dit kan leiden tot dubbele verwerking van gebeurtenissen, bijvoorbeeld door te blijven scrollen nadat de website iets met de touchmove heeft gedaan en preventDefault op de gebeurtenis aanroept, waardoor de browser de gebeurtenis niet hoeft te verwerken.
Browsers: Mobile Safari (bij scrollen door document), Firefox
Touchmove onderdrukt tijdens scrollen
Touchmove-gebeurtenissen worden niet verzonden nadat het scrollen is gestart en worden pas hervat na de touchend-gebeurtenis. In dit model is het verschil tussen een stilstaande aanraking en een scrollbeweging moeilijk te zien.
Browsers: Samsung Browser (mousemove-gebeurtenissen verzonden)
Aanraken annuleren bij starten van scrollen
Je kunt niet twee dingen tegelijk doen: soepel scrollen en controle door ontwikkelaars. Dit model maakt de afweging tussen soepel scrollen en gebeurtenisafhandeling duidelijk, vergelijkbaar met de semantiek van de Pointer Events- specificatie. Sommige ervaringen die de vinger moeten volgen, zoals pull-to-refresh, zijn niet mogelijk.
Browsers: Chrome Desktop M32+, Chrome Android
Waarom veranderen?
Chrome voor Android gebruikt momenteel het oude model van Chrome: touchcancel bij het starten van scrollen. Dit verbetert de scrollprestaties, maar leidt tot verwarring bij ontwikkelaars. Sommige ontwikkelaars zijn zich met name niet bewust van de touchcancel-gebeurtenis of weten niet hoe ze ermee om moeten gaan, wat ertoe heeft geleid dat sommige websites vastliepen. Belangrijker nog, een hele reeks scroll-effecten en -gedragingen in de gebruikersinterface, zoals pull-to-refresh , verborgen balken en snap points, zijn moeilijk of onmogelijk goed te implementeren.
In plaats van het toevoegen van specifiek hardgecodeerde functies ter ondersteuning van deze effecten, richt Chrome zich op het toevoegen van platformprimitieven waarmee ontwikkelaars deze effecten direct kunnen implementeren. Zie Een rationeel webplatform voor een algemene uitleg van deze filosofie.
Het nieuwe model van Chrome: het beperkte asynchrone Touchmove-model
Chrome introduceert een nieuw gedrag dat is ontworpen om de compatibiliteit met code die voor andere browsers is geschreven tijdens het scrollen te verbeteren, en om andere scenario's mogelijk te maken die afhankelijk zijn van touchmove-gebeurtenissen tijdens het scrollen. Deze functie is standaard ingeschakeld en u kunt deze uitschakelen met de volgende vlag: chrome://flags\#touch-scrolling-mode .
Het nieuwe gedrag is:
- De eerste aanraakbeweging wordt synchroon verzonden, zodat het scrollen kan worden geannuleerd
- Tijdens actief scrollen
- touchmove-gebeurtenissen worden asynchroon verzonden
- beperkt tot 1 gebeurtenis per 200 ms , of als een CSS-slopgebied van 15 px wordt overschreden
- Event.cancelable is onwaar
- Anders worden touchmove-gebeurtenissen synchroon geactiveerd zoals normaal wanneer actief scrollen wordt beëindigd of niet mogelijk is omdat de scrolllimiet is bereikt
- Een touchend-gebeurtenis vindt altijd plaats wanneer de gebruiker zijn vinger optilt
U kunt deze demo in Chrome voor Android uitproberen en de chrome://flags\#touch-scrolling-mode vlag omzetten om het verschil te zien.
Laat ons weten wat je ervan vindt
Het Async Touchmove Model heeft de potentie om de compatibiliteit tussen browsers te verbeteren en een nieuwe klasse aanraakbewegingseffecten mogelijk te maken. We zijn benieuwd wat ontwikkelaars ervan vinden en welke creatieve mogelijkheden jullie ermee kunnen creëren.