Tu e i tuoi utenti volete app web mobile che reagiscono e scorrono senza problemi al tocco. Svilupparli dovrebbe essere facile, ma, purtroppo, il modo in cui i browser web mobile reagiscono agli eventi tocco durante lo scorrimento viene lasciato come dettaglio di implementazione nella specifica TouchEvent. Di conseguenza, gli approcci possono essere suddivisi approssimativamente in quattro categorie. Questa situazione mette in evidenza una tensione fondamentale tra la fluidità dello scorrimento e il mantenimento del controllo dello sviluppatore.
Quattro diversi modelli di elaborazione degli eventi tocco?
Le differenze di comportamento tra i browser si suddividono in quattro modelli.
Elaborazione normale degli eventi sincroni
Gli eventi touchmove vengono inviati durante lo scorrimento e ogni aggiornamento dello scorrimento viene bloccato fino al completamento della gestione di touchmove. Questo approccio è utile perché è il più semplice da comprendere e il più potente, ma è negativo per le prestazioni di scorrimento perché significa che ogni frame durante lo scorrimento deve bloccarsi nel thread principale.
Browser: browser Android (Android 4.0.4, 4.3), Safari mobile (durante lo scorrimento del div)
Elaborazione asincrona di touchmove
Gli eventi touchmove vengono inviati durante lo scorrimento, ma lo scorrimento può procedere in modo asincrono (l'evento touchmove viene ignorato dopo l'inizio dello scorrimento). Ciò può comportare una "doppia gestione" degli eventi, ad esempio lo scorrimento continua dopo che il sito web ha fatto qualcosa con il tocco e chiama preventDefault sull'evento, dicendo al browser di non gestirlo.
Browser: Safari mobile (durante lo scorrimento di Document), Firefox
Evento Touchmove soppresso durante lo scorrimento
Gli eventi touchmove non vengono inviati dopo l'inizio dello scorrimento e non riprendono fino a dopo l'evento touchend. In questo modello, è difficile distinguere tra un tocco fermo e uno scorrimento.
Browser: Samsung Browser (eventi mousemove inviati)
Touchcancel all'inizio dello scorrimento
Non puoi avere entrambe le cose: scorrimento fluido e controllo dello sviluppatore. Questo modello chiarisce il compromesso tra scorrimento fluido e gestione degli eventi, in modo simile alla semantica della specifica Eventi relativi al cursore. Alcune esperienze che potrebbero richiedere il monitoraggio del dito, come il gesto di scorrimento per aggiornare, 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 all'inizio dello scorrimento, che migliora le prestazioni dello scorrimento, ma genera confusione negli sviluppatori. In particolare, alcuni sviluppatori non sono a conoscenza dell'evento touchcancel o di come gestirlo, il che ha causato il malfunzionamento di alcuni siti web. Ancora più importante, un'intera classe di comportamenti ed effetti di scorrimento dell'interfaccia utente, come pull-to-refresh, barre nascoste e punti di aggangione, è difficile o impossibile da implementare correttamente.
Anziché aggiungere funzionalità hardcoded specifiche per supportare questi effetti, Chrome mira a concentrarsi sull'aggiunta di primitive della piattaforma che consentano agli sviluppatori di implementare direttamente questi effetti. Per una spiegazione generale di questa filosofia, consulta A Rational Web Platform.
Il nuovo modello di Chrome: il modello Touchmove asincrono limitato
Chrome introduce un nuovo comportamento pensato per migliorare la compatibilità con il codice scritto per altri browser durante lo scorrimento, nonché per abilitare altri scenari che dipendono dall'ottenimento di eventi touchmove durante lo scorrimento. Questa funzionalità è attiva per impostazione predefinita e puoi disattivarla con il seguente flag, chrome://flags\#touch-scrolling-mode.
Il nuovo comportamento è il seguente:
- Il primo evento touchmove viene inviato in modo sincrono per consentire di annullare lo scorrimento
- Durante lo scorrimento attivo
- Gli eventi touchmove vengono inviati in modo asincrono
- limitato a un evento ogni 200 ms oppure se viene superata una regione di inclinazione CSS di 15 px
- Event.cancelable è false
- In caso contrario, gli eventi touchmove vengono attivati in modo sincrono come di consueto quando lo scorrimento attivo termina o non è possibile perché è stato raggiunto il limite di scorrimento
- Quando l'utente solleva il dito, viene sempre generato un evento touchend
Puoi provare questa demo in Chrome per Android e attivare/disattivare il flag chrome://flags\#touch-scrolling-mode per vedere la differenza.
Facci sapere la tua opinione
Il modello Async Touchmove ha il potenziale per migliorare la compatibilità tra browser e abilitare una nuova classe di effetti dei gesti tocco. Siamo interessati a sapere cosa ne pensano gli sviluppatori e a scoprire le creazioni che puoi realizzare con questo strumento.