同じページに複数の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が正しいようだ、

は、関数がWELとして呼ばれている 'ロード' を確認してください。このような

何か：助け

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関数には対応していません。 第2の関数iscroller_reinit (el)は、指定された単一のiscrollerを再初期化するためのもので、コンテナがajax要求によってロードされた後に起動されることがあります。