Come impedire il comportamento predefinito dell'evento touchmove in iOS 5?

Question

Ho un'applicazione basata sul Web che include un componente che l'utente può scorrere su e giù con il dito. Uso il metodo preventDefault dell'evento per impedire il comportamento predefinito in cui il tocco sposta sposta l'intero schermo sui dispositivi iOS.

Purtroppo questo non sembra funzionare più in iOS 5, che ho appena aggiornato a questa mattina. Devo supporre che questo sia fatto in modo diverso in iOS 5, ma devo ancora essere in grado di trovare una risorsa che fornisce istruzioni.

Grazie!

Aggiornamento n. 1: non sono stato in grado di trovare una risposta alla mia domanda specifica, ma sono stato in grado di regolare un po 'il mio codice per utilizzare lo stile di scorrimento -webkit-overflow (impostato su un valore di "touch" ") e implementa la snervante capacità di scorrimento inerziale (dove il contenuto scorre più veloce a seconda della velocità del tuo scorrimento e rimbalza" elastico "indietro se colpisce i confini.) Aspetto molto bello ...

Aggiornamento # 2: Ho un altro strano problema ora, per qualche strana ragione che il comportamento di scorrimento a sfioro si confonde a volte per cui devi trascinare il dito a sinistra ea destra sull'elemento che lo contiene per far sì che il suo contenuto si muova su e giù. per capire perché questo accade - qualcuno ha qualche idea ???

Answer 1

In primo luogo, posso verificare che e.preventDefault() disabilita tutti lo scorrimento in iOS 5 utilizzando il seguente codice:

document.ontouchmove = function(e){ e.preventDefault(); } 

Purtroppo, però, questo disabilita lo scorrimento in caso di overflow: scroll div. (Se qualcuno ha una soluzione che lascia lo scorrimento dell'elemento interno abilitato, si prega di condividere.)

Per quanto riguarda l'aggiornamento n. 2, ho notato un comportamento strano quando c'è un elemento scorrevole annidato in un altro elemento scorrevole (inclusa la pagina stessa). A volte il dispositivo esita su quale elemento l'utente intende scorrere. In particolare ho notato questo problema usando la posizione: fissa. La mia soluzione era assicurarsi che il corpo avesse il 100% di altezza e che gli elementi scorrevoli usassero la posizione: assoluta dove possibile.

Answer 2

Ho trovato una soluzione molto semplice. Quando l'evento colpisce il tuo elemento che può scorrere, basta aggiungere un flag all'evento. Sul listener di eventi sul documento basta controllare se è impostato il flag e solo di fermare la manifestazione se il flag non è impostato:

this.$scrollableEl.on('touchmove', function(event){ 
    event.comesFromScrollable = true; 
    //when you have containers that are srollable but 
    //doesn't have enough content to scroll sometimes: 
    //event.comesFromScrollable = el.offsetHeight < el.scrollHeight; 
}) 

$document.on('touchmove', function(event){ 
    if(!event.comesFromScrollable){ 
     event.preventDefault() 
    } 
    }) 

Si potrebbe anche usare event.stopImmediatePropagation, invece, in modo da non avete bisogno della eventListener sul documento elemento, ma questo si rompe zepto.js tap nel mio caso:

this.$scrollableEl.on('touchmove', function(event){ 
    event.stopImmediatePropagation() 
})