Elementi iScroll multipli nella stessa pagina

Question

Sto creando un sito Web mobile con jQtouch e iScroll.

ho wan't per ottenere più aree scorrevoli con iScroll, ma solo delle liste lavora con iScroll ...

ho provato con questo:

var scroll1, scroll2; 
function loaded() { 
    scroll1 = new iScroll('wrapper'); 
    scroll2 = new iScroll('list_wrapper'); 
} 

Ma senza fortuna. Chiunque ha una soluzione che funziona?

mio html:

<div id="wrapper"> 
    <ul> 
     <li><a href="#">Test</a></li> 
    </ul> 
</div> 

<div id="list_wrapper"> 
    <ul> 
     <li><a href="#">Test</a></li> 
    </ul> 
</div> 

Answer 1

tuo html sembra corretto,

assicurarsi 'caricato' la funzione viene chiamata come wel.

Qualcosa di simile a questo:

document.addEventListener('DOMContentLoaded', loaded, false); 

speranza che aiuta.

Answer 2

var scroll1, scroll2; 

$("#you_might_like_index").live("pageshow", function() { 

    setTimeout(function(){scroll1 = new iScroll('wrapper');}, 0); 
    setTimeout(function(){scroll2 = new iScroll('list_wrapper');}, 0); 
}); 

<div data-role="page" id="you_might_like_index"> 

    <div id="wrapper"> 
    <div id="scroller"> 
     <ul> 
     <li><a href="#">Test</a></li> 
     </ul> 
    </div> 
    </div> 


    <div id="list_wrapper"> 
    <div id="scroller"> 
     <ul> 
     <li><a href="#">Test</a></li> 
     </ul> 
    </div> 
    </div> 

</div> 

Answer 3

Sto usando questo approccio.

Html:

<div class="carousel" id="alt-indie"> 
    <div class="scroller"> 
     <ul> 
      <li></li> 
      // etc 
     </ul> 
    </div> 
</div> 

JS:

$('.carousel').each(function (index) { 
    new iScroll($(this).attr('id'), { /* options */ }); 
}); 

quindi ogni cosa con la classe di "giostra" diventerà un cursore.

Answer 4

Questa risposta potrebbe essere un po 'in ritardo ... ma poiché ero bloccato sullo stesso problema, ecco la mia soluzione, che funziona alla grande. Nota: questa soluzione richiede jquery, ma lo sto usando comunque.

La parte script:

function iscroller_init() { 
    var iscroller = $('.iscroller'); 
    iscroller.each(function(index){ 
     $(this).addClass('iscroller'+index).attr('iscroller_id','iscroller'+index); 
     var tmpfnc = new Function('var myScroll'+index); 
     tmpfnc(); 
     var tmpfnc = new Function('myScroll'+index+' = new IScroll(\'.iscroller'+index+'\', { mouseWheel: true });'); 
     tmpfnc(); 
    }); 
} 

function iscroller_reinit (el) { 
    var el = $(el); 
    var iscroller = $('.iscroller'); 
    var i = iscroller.index(el); 
    var tmpfnc = new Function('var myScroll'+i+' = new IScroll(\'.iscroller'+i+'\', { mouseWheel: true });'); 
    tmpfnc(); 
} 

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

$(document).ready(function(){ 
    if ($('.iscroller').length > 0) iscroller_init(); 
}); 

il codice HTML:

<div class="scrollholder fl"> 
    <div class="iscroller"> 
     <div class="scroller"> 
      <ul> 
       <li>Pretty row 1</li> 
       <li>Pretty row 2</li> 
       <li>Pretty row 3</li> 
       <li>Pretty row 4</li> 
       ..... 
       <li>Pretty row 47</li> 
       <li>Pretty row 48</li> 
       <li>Pretty row 49</li> 
       <li>Pretty row 50</li> 
      </ul> 
     </div> 
    </div> 
</div> 

in cui il genitore è il <div class="scrollholder fl"> div genitore, che può essere posizionata dove si vuole, e più volte. Info: La classe "fl" funziona come separatore di CSS per "float:left;" nel mio caso e non corrisponde a nessuna funzione di iscrizione. La seconda funzione iscroller_reinit (el) è per la reinizializzazione del singolo inseguitore specificato, può essere attivata dopo che il contenitore è stato caricato da una richiesta jax.