Múltiples elementos de iScroll en la misma página

Question

Estoy creando un sitio web móvil con jQtouch e iScroll.

Me wa para obtener múltiples áreas de desplazamiento con iScroll, pero sólo de las listas trabaja con iScroll ...

he intentado con esto:

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

Pero sin suerte. ¿Alguien tiene una solución que funciona?

Mi 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

su HTML parece correcta,

asegúrese 'cargado' función se llama como wel.

Algo como esto:

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

espero que ayude.

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

Estoy usando este enfoque.

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 */ }); 
}); 

así que cualquier cosa con la clase del "carrusel" se convertirá en un control deslizante.

Answer 4

Esta respuesta puede ser un poco tarde ... pero como estaba atascado en el mismo problema, esta es mi solución, que funciona muy bien. Nota: Esta solución requiere jquery, pero la estoy usando de todos modos.

La parte de la escritura:

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(); 
}); 

El 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> 

donde el padre <div class="scrollholder fl"> es el div padre, que se puede colocar donde desee, y varias veces. Información: La clase "fl" funciona como separador css para "float:left;" en mi caso y no corresponde a ninguna función iscroll. La segunda función iscroller_reinit (el) es para la reinicialización de un solo iscroller específico, puede dispararse después de que el contenedor se haya cargado mediante una solicitud ajax.