How to handle Multiple DOM elements with iScroll (

Question

I've my markups as

<div id="home" class="current">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller">
            <ul id="thelist" class="plastic"><!-- li items --></ul>
        </div>
    </div>
    <div class="footer">Footer</div>
</div>   
    <!-- Events Details -->
<div id="events">
    <div class="header">iScroll</div>
    <div class="wrapper">
        <div id="scroller"> <!-- stuffsss --></div>
    </div>
    <div class="footer">Footer</div>
</div>

For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.

//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});

// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);

But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.

I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.

Can anyone help me change the codes so that it works by implementing classes instead of the the id??

Answer 1

Rob is right, but you can change your code to scroller classes as you said. Then initialise your scrollers within unique wrappers like this:

var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}

Answer 2

I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread

https://stackoverflow.com/a/7584694/1232232

but for this to work you need to assign ID's to your classed (div containers) like

<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div> 
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>

Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.

Answer 3

I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.