IScroll5用于类而不是ID

时间:2014-05-08 13:41:03

标签: jquery class iscroll

我知道在这个论坛上已经被问了很多次,但我还没有找到一个有效的解决方案。

我有多个ID,我想要应用IScroll的同一个类。

<div id="myid" class="myclass">
 // content
</div>
<div id="myid-differentname" class="myclass">
 // content 
</div>

但是,我无法更改ID,并且它们的数量不会增加,例如myId1,myId2等......它们都有全名。

看看这个论坛中的另一个主题(Trigger iScroll 4 on all elements with a certain Class)我还没有能够让它发挥作用。

我使用的代码是(基于该线程):

$(document).ready(function() {

   var myScroll = new Array();

   $('.myclass').each(function(){
            id = $(this).attr('id');
            myScroll.push(new IScroll(id, { mouseWheel: true, scrollbars: true, interactiveScrollbars: true, scrollbars: 'custom' }););
    });
});

任何人都可以详细说明吗?

1 个答案:

答案 0 :(得分:1)

我记得这对我有用:

var scrollName = new Array();
var scrollId = new Array();

$('.myclass').each(function(index) {
    scrollId[index] = $(this).attr('id');
    setTimeout(function() {
        scrollName[index] = new IScroll(scrollId[index], {
            mouseWheel: true,
            scrollbars: true,
            interactiveScrollbars: true
            scrollbars: 'custom'
        });
    }, 100);
});

它适用于iScroll 4,但我认为版本5没问题。

---------------------------------------

更新1

按类分类的多个iScroll

在iScroll 5中,您可以使用类作为选择器:

var scroller = new Array();

$('.myclass').each(function(){

myScroller = new IScroll(this, {
    scrollX: false,
    scrollY: true,
    mouseWheel: true,
    scrollbars: true,
    interactiveScrollbars: true 
});

scroller.push(myScroller);
});

可以使用以下方式触发不同的滚动条:

scroller[0].scrollTo(0, -100, 500);
scroller[1].scrollTo(0, -200, 500);

所以你不需要指定一个id。只要你不想要不同的选择。

jsfiddle demo

---------------------------------------

更新2

ID为

的多个iScroll

以下是使用多个id选择器的工作示例

var scroller = new Array();
var selfId = new Array();

$('.myclass').each(function(){

selfId = $(this).attr('id');
myScroller = new IScroll('#' + selfId, {
    scrollX: false,
    scrollY: true,
    mouseWheel: true,
    scrollbars: true,
    interactiveScrollbars: true 
});

scroller.push(myScroller);
console.log(selfId.toString()); 

});

可以使用以下方式触发不同的滚动条:

scroller[0].scrollTo(0, -100, 500);
scroller[1].scrollTo(0, -200, 500);

jsfiddle demo