IScroll5 use for classes instead of ids

Question

I know it's been asked quite a few times in this forum, but I haven't found a single solution that works.

I have multiple ids with the same class I want the IScroll to be applied on.

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

However, I cannot change the ids, and they are not in increasing number like myId1, myId2, etc... they have full names.

Looking at another thread in this forum (Trigger iScroll 4 on all elements with a certain Class) I haven't been able to make it work.

The code I used is (based on that thread):

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

Can anyone elaborate?

Answer 1

I remember this worked for me:

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

It worked with iScroll 4, but I think no problem with version 5.

———————————————————————————————————————

UPDATE 1

Multiple iScrolls by class

In iScroll 5 you can use a class as selector:

var scroller = new Array();

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

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

scroller.push(myScroller);
});

The different scrollers can be triggered with:

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

So you don't need to specify an id. As long as you don't want different options.

jsfiddle demo

———————————————————————————————————————

UPDATE 2

Multiple iScrolls by id

Here is a working example by using multiple id selectors

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

});

The different scrollers can be triggered with:

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

jsfiddle demo