同一頁面上的多個iScroll元素

我正在用jQtouch和iScroll製作移動網站。同一頁面上的多個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>

來源

2012-04-02 Simon Thomsen

這個工作對我來說，我是有它的麻煩過於 http://stackoverflow.com/a/7159687/903000 – Mike 2013-03-05 06:22:25

你的HTML似乎是正確的，

確保 '加載' 功能被稱爲逢。

事情是這樣的：

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

希望幫助。

來源

2012-04-08 10:12:47 Varinder

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>

來源

2012-04-18 03:20:49

我正在使用這種方法。

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

與類的「旋轉木馬」，所以，只要將成爲一個滑塊。

來源

2012-06-01 14:37:51 eth0

這個答案可能有點晚...但由於我被困在同樣的問題，這裏是我的解決方案，這很好。注意：這個解決方案需要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)用於重新初始化指定的單個iscroller，可能在容器被ajax請求加載後觸發。

來源

2015-01-20 23:56:12 ddlab

同一頁面上的多個iScroll元素

回答

相關問題