iScroll non consente di fare clic sugli elementi

Question

Sto usando iScroll4 e funziona benissimo!

Questo sono le funzioni che uso per init, aggiornare e terminare iScroll:

function iniciarIscroll(){ 
    /*En ie7 no lo usamos*/ 
    if(!ie7){ 
     $(document).ready(function() { 
      myScroll1 = new iScroll('nvl1'); 
      myScroll2 =new iScroll('nvl2'); 
      /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 
      document.addEventListener('DOMContentLoaded', setTimeout(function() { loaded(); }, 200), false);*/ 
     }); 
    } 
    return false; 
} 

function refrescarIscroll(){ 
    if(!ie7){ 
     myScroll1.refresh(); 
     myScroll2.refresh(); 
    } 
    return false; 
} 


function terminarIscroll(){ 
    if(!ie7){ 
     myScroll1.destroy(); 
     myScroll1 = null; 
     myScroll2.destroy(); 
     myScroll2 = null; 
    } 
    return false; 
} 

Il problema è che non lascerà <a> o <input> o qualcosa di essere cliccato (o concentrati, non sono sicuro) ; anche css: hover o: focus non verrà applicato; ma sarebbe generare eventi in JavaScript come

.hover() or .click() 

Qualsiasi idea di come risolvere questo, se possibile?

Answer 1

L'autore ha commentato che la compatibilità dei moduli è glitch - è un problema noto e sta lavorando a una correzione per la prossima versione. Qualcun altro ha commentato nei forum:

Come di v4.1.9, il supporto per i campi del modulo è ancora in fase di sviluppo. L'utente può eseguire i pulsanti di opzione e le caselle di controllo lavorando avvolgendo un'etichetta (il wrapping sembra funzionare meglio che utilizzare la sintassi = "").

I collegamenti dovrebbero andare bene e lavorare nelle demo fornite. Hai commentato la chiamata e.preventDefault() nel tuo script di init che è il solito colpevole. Forse il problema di compatibilità del modulo sta influenzando anche i collegamenti?

Come per l'evento di hover, da quello che posso dire questo dovrebbe essere attivato quando un elemento viene toccato.

La speranza aiuta un po '. Scenario peggiore: elimina il codice e inizia con una pagina demo del progetto, adatta le tue esigenze una riga alla volta e continua a testarla. Presto saprai quale modifica interrompe il comportamento previsto.

Answer 2

Una soluzione che ho usato è quella di "congelare" l'iscroll quando voglio che l'utente sia in grado di apportare modifiche. L'incompatibilità che iScroll ha con gli input è correlata per quanto posso dire alle trasformazioni css in combinazione con il supporto touch applicato al contenuto dello scroller. Se si disattiva temporaneamente lo scroller, è possibile consentire all'utente di immettere valori. Il trucco è assicurarsi che l'attuale posizione di scorrimento del contenuto sia preservata disabilitando. Quando "congelato" un utente può aggiornare gli input all'interno dell'area visibile. Lo svantaggio è che lo scroller non scorrerà durante questo stato. Dovrai scongelarlo su qualche evento.

ho aggiunto queste funzioni per l'iScroll.prototype per fare questo lavoro:

_get_current_scroll_px: function (transformStyle) { 
    //return the first string that looks like an integer, that should be the x translation 
    return /[\-0-9]+px/.exec(transformStyle)[0]; 
}, 


freeze: function() { 
    this.disable(); 
    this.savedStyle = this.scroller.style[vendor + 'Transform']; 
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller 
    this.scroller.style[vendor + 'Transform'] = ''; 
}, 

thaw: function() { 
    this.scroller.style[vendor + 'Transform'] = this.savedStyle; 
    this.scroller.style['marginLeft'] = '0'; 
    this.enable(); 
} 

Calling o congelamento sarebbe simile:

//user triggered event causes freeze 
yourFreezeEventCallback: function() { 
    myScroll1.freeze(); 
    //now user can use visible inputs on screen 
} 

scongelamento sarebbe simile:

//user triggered event causes thaw 
yourThawEventCallback: function() { 
    myScroll1.thaw(); 
    //now scrolling is back and inputs can no longer be edited or in focus 
} 

Ovviamente, è necessario integrarlo in qualche modo nel proprio progetto, ma ha funzionato per me. Non è l'ideale quindi non vedo l'ora dell'aggiornamento di iScroll. Attenzione: questo non è testato in IE quindi non ve lo garantisco lì. Spero che questo sia almeno l'inizio per aiutarti ad arrivare a un lavoro.

Answer 3

Quando ho scoperto per la prima volta iScroll, ho pensato che fosse la soluzione a molti dei miei problemi. Quindi questo problema mi ha messo in difficoltà.Durante il tentativo di trovare una soluzione alternativa, ho trovato this pull request.

C'è una nota sulla richiesta di pull che è stata trovata un'altra soluzione migliore, anche se non sono sicuro di quale sia la richiesta pull che avrebbe dovuto risolvere il problema. Vedrò se riesco a ottenere informazioni più dettagliate dall'autore di quella nota.

Aggiornamento: è possibile trovare la richiesta pull corrispondente here. Non ho ancora avuto la possibilità di testarlo (spero di confermare il supporto Android più tardi oggi.)

Answer 4

Ho anche lavorato per far scorrere le cose senza problemi nell'ambiente mobile e iscroll era una delle librerie che ho considerato in la mia ricerca per lo strumento giusto. Altre risposte hanno suggerito come è possibile risolvere il problema specifico, ma in realtà suggerirei di utilizzare scrollability (di Joe Hewitt) o touchscroll (di David Aurelio). Penso che la scrollabilità offra effettivamente la sensazione migliore ma non è veramente fatta e finirebbe per affrontare problemi identici o simili. Uso personalmente touchscroll per un mio progetto e lo raccomando.

Ho dovuto inserire azioni di clic personalizzate e controllo di timeout quando stavo sperimentando con iscroll alcune settimane fa nel mio progetto e l'ho fatto commentando e.preventDefault() all'inizio del tocco e inserendo alcuni delle mie funzioni da catturare quando effettivamente scorre. Al loro centro queste librerie funzionano tutte allo stesso modo (catturando gli eventi e prevenendoli, eseguendo le trasformazioni CSS per rendere più fluide le animazioni di ridisposizione DOM, quindi attivando artificialmente tutti gli eventi che dovrebbero essere attivati). Ciò significa che l'altro modo in cui puoi risolvere il problema è quello di trovare quando deve accadere l'evento del clic per i tuoi elementi specifici e attivarlo manualmente nel codice. In touchscroll ascolta gli eventi sull'elemento superiore in modo da poter sovrascrivere il comportamento semplicemente interrompendo il bubbling ... Non ricordo se iscroll fa lo stesso.

Questa (fluida sensazione nativa, l'animazione nei dispositivi mobili) è ancora un'area che è ai margini delle varie tecnologie, quindi nessuno ha ancora la soluzione completa. Mi aspetterei in pochi anni che i dispositivi mobili migliorino in modo che i browser mobili gestiscano nativamente gli eventi di scorrimento in ogni caso, ma fino ad allora siamo costretti a mettere insieme soluzioni come queste. In bocca al lupo!

Answer 5

Hai solo bisogno di fare questo cambia nel caricatore del iscroll:

Modifica questa linea:

myScroll = new iScroll('wrapper'); 

Per questo:

myScroll = new iScroll('wrapper', { 
useTransform: true, 
zoom: false, 
onBeforeScrollStart: function (e) { 
var target = e.target; 
while (target.nodeType != 1) target = target.parentNode; 

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') 
e.preventDefault(); 
} 
}); 

Answer 6

// Setup myScroll 
    myScroll = new IScroll('#wrapper', { 
    scrollX: horizontalSwipe, 
    scrollY: !horizontalSwipe, 
    momentum: false, 
    snap: document.querySelectorAll('#scroller .slide'), 
    snapSpeed: 400, 
    bounceEasing: 'back', 
    keyBindings: true, 
    click: true 
    }); 

Per quanto mi riguarda, io basta aggiungere il clic: true nell'ultima riga ... Abbiamo passato tutto il giorno a eseguire il debug e implementare tutto le soluzioni proposte senza successo ...

Answer 7

bug del browser Android è il risultato di una versione molto vecchia di WebKit all'interno di Android, anche all'interno di Android 4.3. La causa principale del bug - elaborazione errata dell'evento click che iScroll invia al browser (rimuovere preventDefault interrompe semplicemente l'invio di questo evento click) Il browser Android Chrome è esente da questo bug perché ha aggiornato la libreria WebKit all'interno.

In attesa di aggiornamento di Android WebKit da Google.

Answer 8

commento fuori

position:absolute; 

a #pageWrapper in styles.css

Nel mio caso, questo ha risolto il problema cliccabile qui sopra.

Answer 9

Prova questa

myScroll = new IScroll('#wrapper', { click: true });