Tu e i tuoi utenti volete app web mobile che reagiscano e scorrano facilmente fino al tocco. Svilupparle dovrebbe essere facile ma, sfortunatamente, il modo in cui il web mobile i browser reagiscono agli eventi di tocco durante lo scorrimento viene lasciata come implementazione dettaglio nella specifica TouchEvent. Come Di conseguenza, gli approcci possono essere suddivisi approssimativamente in quattro categorie. Questo crea una tensione fondamentale tra l'uniformità di scorrimento e e mantenere il controllo degli sviluppatori.
Quattro diversi modelli di elaborazione degli eventi touch?
Le differenze di comportamento tra i browser sono suddivise in quattro modelli.
Normale elaborazione degli eventi sincroni
Gli eventi Touchmove vengono inviati durante lo scorrimento e ogni aggiornamento dello scorrimento si blocca fino al completamento della gestione di touchmove. È l'opzione più semplice da capire e la più efficace, ma anche la più efficace per le prestazioni di scorrimento, perché significa che ogni frame durante lo scorrimento deve bloccarsi sul thread principale.
Browser: browser Android (Android 4.0.4, 4.3), Safari mobile (quando si scorre l'elemento div)
Elaborazione asincrona del movimento tattile
Gli eventi touchmove vengono inviati durante lo scorrimento, ma può procedere in modo asincrono (l'evento touchmove viene ignorato dopo l'inizio dello scorrimento). Questo può portare a una "doppia gestione" di eventi, ad esempio continuando a scorrere dopo che il sito web ha eseguito un'operazione con touchmove e chiama preventDefault sull'evento, indicando al browser di non gestirlo.
Browser: Safari mobile (quando si scorre il documento), Firefox
Touchmove soppresso durante lo scorrimento
Gli eventi Touchmove non vengono inviati dopo l'inizio dello scorrimento e riprendono solo dopo l'evento touchend. In questo modello, è difficile distinguere un tocco stazionario e una pergamena.
Browser: browser Samsung (eventi Mousemove inviati)
Annulla tocco all'inizio dello scorrimento
Non si possono avere entrambi i modi, ovvero la fluidità dello scorrimento e il controllo per gli sviluppatori, e questo modello chiarisce il compromesso tra scorrimento fluido e gestione degli eventi, in modo simile alla semantica della specifica Eventi puntatore. Alcune esperienze che potrebbero richiedere il monitoraggio del dito, come il pull-to-refresh, non sono possibili.
Browser: Chrome Desktop M32 e versioni successive, Chrome Android
Perché cambiare?
Al momento Chrome per Android utilizza il vecchio modello di Chrome: touchcancel allo scorrimento il che migliora le prestazioni dello scorrimento, ma crea confusione negli sviluppatori. In particolare, alcuni sviluppatori non sono a conoscenza dell'evento touchcancel o di come occuparsene, con il conseguente malfunzionamento di alcuni siti web. Ma soprattutto, un'intera classe di effetti e comportamenti di scorrimento dell'interfaccia utente, come pull-to-refresh, Le barre nascoste e gli snap point sono difficili o impossibili da implementare beh.
Invece di aggiungere funzionalità hardcoded in modo specifico per supportare questi effetti, Chrome punta a concentrarsi sull'aggiunta di primitive di piattaforma che consentano agli sviluppatori di implementare direttamente questi effetti. Consulta Una piattaforma web razionale per un'esposizione generale di questa filosofia.
Nuovo modello di Chrome: il modello Touchmove asincrono limitato
Chrome sta introducendo un nuovo comportamento
progettato per migliorare la compatibilità con codice scritto per altri browser quando
scorrimento, oltre ad attivare altri scenari che dipendono da come toccare
eventi durante lo scorrimento. Questa funzione è attiva per impostazione predefinita e puoi attivarla
disattivata con il seguente flag: chrome://flags\#touch-scrolling-mode.
Il nuovo comportamento è:
- Il primo touchmove viene inviato in modo sincrono per consentire lo scorrimento annullata
- Durante lo scorrimento attivo
- Gli eventi touchmove vengono inviati in modo asincrono
- Limitato a 1 evento ogni 200 ms o se una regione con slop 15px CSS viene superato
- Event.cancelable è false
- Altrimenti, gli eventi touchmove si attivano in modo sincrono come di consueto quando viene eseguito lo scorrimento attivo. termina o non è possibile perché è stato raggiunto il limite di scorrimento
- Un evento di touchend si verifica sempre quando l'utente solleva il dito
Puoi provare questa demo in Chrome per Android e attivare/disattivare
chrome://flags\#touch-scrolling-mode per vedere la differenza.
Facci sapere la tua opinione
Il modello Async Touchmove può migliorare le prestazioni e attivare una nuova classe di effetti per i gesti tattili. Siamo interessati nel conoscere l'opinione degli sviluppatori e nel vedere le creatività che puoi realizzare con essa.