Javascript 同一页上有多个iScroll元素

我正在用jQtouch和iScroll制作一个移动网站

我不想用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>

您的html似乎是正确的

确保“已加载”函数也被调用

大概是这样的：

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

希望对您有所帮助。

var scroll1、scroll2；
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>

$（“你可能会喜欢索引”）.live（“pageshow”，函数（）{
setTimeout（函数（）{scroll1=newiscroll（'wrapper'）；}，0）；
setTimeout（函数（）{scroll2=newiscroll（'list_wrapper'）；}，0）；
});

我正在使用这种方法

Html:

---

因此，任何带有“carousel”类的内容都将成为滑块。

这个答案可能有点晚了。。。但既然我被困在同一个问题上，下面是我的解决方案，效果很好。 注意：此解决方案需要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>

漂亮的第一排
漂亮的第二排
漂亮的第三排
漂亮的第四排
.....
漂亮的第47排
漂亮的第48排
漂亮的第49排
漂亮的第50排

其中父级

是父级div，可以将其定位在您想要的位置，并且可以多次定位。 信息：在我的例子中，类“fl”用作

“float:left；”“

的css分隔符，与任何iscroll函数都不对应。

---

第二个函数

iscroller\u reinit（el）

用于重新初始化指定的单个iscroller，可能在通过ajax请求加载容器后启动。

这对我来说很有效，我也遇到了问题

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

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