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>
Your html seems correct,
make sure 'loaded' function is being called as wel.
Something like this:
hope that helps.
I'm using this approach.
Html:
JS:
so anything with the class of "carousel" will become a slider.
This answer might be a bit late... but since I was stuck on the same problem, here's my solution, which works great. Note: This solution requires jquery, but I am using it anyway.
The script part:
The html:
where the parent
<div class="scrollholder fl">
is the parent div, which can be positioned where you want, and multiple times. Info: The class "fl" works as css separator for"float:left;"
in my case and is not corresponding to any iscroll function. The second functioniscroller_reinit (el)
is for reinitialisation of specified single iscroller, may be fired after the container was loaded by ajax request.