同一页面上有多个iScroll元素

我正在制作一个带有jQtouch和iScroll的移动网站。

我不想用iScroll获得多个可滚动区域，但只有列表适用于iScroll …

我试过这个：

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

但没有运气。 任何人都有一个有效的解决方案？

我的HTML：

 
 
 
Test
 
 
 
 
 
Test
 
  

Answer 1

我正在使用这种方法。

HTML：

 
 
 
 
 // etc 
 
  

JS：

 $('.carousel').each(function (index) { new iScroll($(this).attr('id'), { /* options */ }); }); 

所以“旋转木马”类的任何东西都会变成滑块。

Answer 2

你的HTML似乎是正确的，

确保调用’loaded’函数。

像这样的东西：

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

希望有所帮助。

Answer 3

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

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：

 
 
 
 
 
Pretty row 1
 
Pretty row 2
 
Pretty row 3
 
Pretty row 4
 ..... 
Pretty row 47
 
Pretty row 48
 
Pretty row 49
 
Pretty row 50
 
 
 
  

其中parent

是父div，它可以定位在您想要的位置，并且可以多次定位。 信息：类“fl”用作"float:left;" css分隔符 在我的情况下，并不对应任何iscrollfunction。 第二个函数iscroller_reinit (el)用于重新初始化指定的单个iscroller，可以在容器被ajax请求加载后触发。