Несколько элементов iScroll на одной странице

Question

Я делаю мобильный сайт с jQtouch и iScroll.

Я wan't получить несколько прокруткой областей с iScroll, но только один из списков работает с iScroll ...

Я пытался с этим:

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

Но без удачи. У любого есть решение, которое работает?

Мой 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

Ваш HTML кажется правильным,

убедитесь 'загружен' функция вызывается в качестве дост.

Что-то вроде этого:

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

надежда, что помогает.

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

Я использую этот подход.

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

так ничего с классом "каруселью" станет слайдер.

Answer 4

Этот ответ может быть немного запоздалым ... но так как я застрял в одной и той же проблеме, вот мое решение, которое отлично работает. Примечание: для этого решения требуется jquery, но я все равно его использую.

Сценарий часть:

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

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> 

где родитель <div class="scrollholder fl"> является родительским DIV, который может быть расположен где вы хотите, и несколько раз. Информация: Класс «fl» работает как css-разделитель для "float:left;" в моем случае и не соответствует какой-либо функции iscroll. Вторая функция iscroller_reinit (el) предназначена для повторной инициализации указанного одиночного икроллера, может быть запущена после того, как контейнер был загружен с помощью запроса ajax.