Multiple iScroll elements on same page

Question

I'm making a mobile website with jQtouch and iScroll.

I wan't to get multiple scrollable areas with iScroll, but only of the lists works with iScroll...

I tried with this:

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

But without luck. Anyone have a solution that's working?

My html:

<div id="wrapper">
    <ul>
        <li><a href="#">Test</a></li>
    </ul>
</div>

<div id="list_wrapper">
    <ul>
        <li><a href="#">Test</a></li>
    </ul>
</div>

Answer 1

I'm using this approach.

Html:

<div class="carousel" id="alt-indie">
    <div class="scroller">
        <ul>
            <li></li>
            // etc
        </ul>
    </div>
</div>

JS:

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

so anything with the class of "carousel" will become a slider.