Vous et vos utilisateurs souhaitez que les applications Web mobiles réagissent et défilent de manière fluide en fonction sur l'écran tactile. Leur développement devrait être simple, mais malheureusement, la façon dont les navigateurs qui réagissent aux événements tactiles lors du défilement est une implémentation. dans la spécification TouchEvent. En tant que Par conséquent, les approches peuvent être divisées à peu près en quatre catégories. Ce présente une tension fondamentale entre la fluidité du défilement et tout en maintenant le contrôle aux développeurs.
Quatre modèles de traitement des événements tactiles ?
Les différences de comportement entre les navigateurs se répartissent en quatre modèles.
Traitement normal des événements synchrone
Les événements Touchmove sont envoyés pendant le défilement, et chaque défilement se met à jour jusqu'à ce que la gestion des mouvements tactiles soit terminée. Il s'agit de la méthode la plus simple à comprendre et la plus efficace, mais néfaste pour les performances de défilement, car chaque image pendant le défilement doit se bloquer sur le thread principal.
Navigateurs: navigateur Android (Android 4.0.4, 4.3), Safari pour mobile (lors du défilement de l'élément div)
Traitement tactile asynchrone
Les événements "touchmove" sont envoyés pendant le défilement, mais ils peuvent se dérouler de manière asynchrone (l'événement "touchmove" est ignoré une fois le défilement commencé). Cela peut entraîner un "double traitement" Il peut s'agir, par exemple, de continuer à faire défiler une page après que le site Web a effectué une action avec touchmove et d'appeler preventDefault sur l'événement pour indiquer au navigateur de ne pas le gérer.
Navigateurs: Mobile Safari (lorsque vous faites défiler un document), Firefox
Touchmove supprimé pendant le défilement
Les événements Touchmove ne sont pas envoyés après le début du défilement et ne sont repris qu'après l'événement tactile. Dans ce modèle, il est difficile de faire la différence entre une pression fixe et un défilement.
Navigateurs: navigateur Samsung (événements de déplacement de la souris envoyés)
Annuler la commande tactile au début du défilement
Il n'est pas possible d'utiliser les deux méthodes : la fluidité du défilement et le contrôle du développeur. Ce modèle permet de faire clairement le compromis entre le défilement fluide et la gestion des événements, à l'instar de la sémantique de la spécification des événements de pointeur. Certaines expériences nécessitant un suivi du doigt, comme l'action "Tirez pour actualiser", ne sont pas possibles.
Navigateurs: Chrome Desktop M32+, Chrome pour Android
Pourquoi changer ?
Chrome pour Android utilise actuellement l'ancien modèle de Chrome: annulation tactile lors du défilement start, ce qui améliore les performances de défilement, mais est source de confusion pour les développeurs. En particulier, certains développeurs ne sont pas au courant de l'événement "touchcancel", ni de la manière s'en occupant, ce qui a provoqué le plantage de certains sites Web. Plus important encore, un toute une classe d'effets et de comportements de défilement de l'interface utilisateur (pull-to-refresh, par exemple) Les barres cachées et les points d'ancrage sont difficiles, voire impossibles à mettre en œuvre. bien.
Au lieu d'ajouter des caractéristiques spécifiquement codées en dur pour prendre en charge ces effets, Chrome souhaite se concentrer sur l'ajout de primitives de plate-forme qui permettent aux développeurs pour implémenter ces effets directement. Voir Une plate-forme Web rationnelle pour une présentation générale de cette philosophie.
Nouveau modèle de Chrome: le modèle Touchmove asynchrone freiné
Chrome introduit un nouveau comportement
conçu pour améliorer la compatibilité avec le code écrit pour d'autres navigateurs lorsque
le défilement, et d'autres scénarios nécessitant une action tactile
des événements pendant le défilement. Cette fonctionnalité est activée par défaut. Vous pouvez l'activer
avec l'indicateur suivant : chrome://flags\#touch-scrolling-mode.
Le nouveau comportement est le suivant:
- Le premier élément touchmove est envoyé de manière synchrone pour permettre le défilement annulé
- Pendant le défilement actif
- Les événements touchmove sont envoyés de manière asynchrone.
- throttled à 1 événement toutes les 200 ms, ou si la région de la pente CSS est de 15px est dépassé
- Event.cancelable a la valeur false
- Sinon, les événements touchmove se déclenchent de manière synchrone, comme à l'accoutumée, lors du défilement actif. se termine ou n'est pas possible, car la limite de défilement a été atteinte
- Un événement tactile se produit toujours lorsque l'utilisateur lève le doigt.
Vous pouvez essayer cette démonstration dans Chrome pour Android et activer/désactiver
chrome://flags\#touch-scrolling-mode pour voir la différence.
Donnez-nous votre avis
Le modèle Async Touchmove peut améliorer et activer une nouvelle classe d'effets de gestes tactiles. Nous sommes intéressés en écoutant l'avis des développeurs et en découvrant les possibilités créatives avec lui.