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?

Marconi · Accepted Answer · 2014-05-09T15:59:20.767

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

you also forgot a comma after inactiveScrollbars, but again it's not working :/ — scooterlord, May 08 '14 at 20:49
thanks! :) will try it tomorrow, but judging from the fiddle this is all I wanted! — scooterlord, May 09 '14 at 00:16
...athough I don't need any seperate options, I need the scrollbars to refresh after a specific action. It is not working though. any ideas? — scooterlord, May 09 '14 at 12:24
Just updated my answer… To access the scrollbars you need to put them into a variable — Marconi, May 09 '14 at 15:34
Sorry that I come to this again.. So you create the scrollers, isn't there a way to control them all at once and not one by one individually? What I am looking for is this. I have collapsible elements inside the scrollers, and I want each one to be updated when a collapse event is triggered inside of it.. — scooterlord, May 10 '14 at 13:23

IScroll5 use for classes instead of ids

1 Answers1