동일한 페이지에 여러 개의 iScroll 요소가 있습니다.

Question

jQtouch 및 iScroll을 사용하여 모바일 웹 사이트를 만들고 있습니다.

나는 iScroll 여러 스크롤 영역을 얻을 wan't 있지만 목록의

내가이 함께 노력 ... 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, 여러 번이

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

. Info : "fl"클래스는 필자의 경우 "float:left;"에 대한 CSS 구분 기호로 사용되며 iscroll 함수에 해당하지 않습니다. 두 번째 함수 iscroller_reinit (el)은 지정된 단일 iscroller를 다시 초기화하기위한 것이며, 컨테이너가 ajax 요청에 의해로드 된 후에 시작될 수 있습니다.

이것은 나를 위해 일한