JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<div data-role="collapsible-set" data-inset="false">
<div id="slow-iscroll-collapsible" data-role="collapsible" data-theme="b">
<h3>JQM ListView with iScroll (slow)</h3>
<div id='slow-iscroll-wrapper' class="scroller">
<ul id="slow-iscroll-list" data-role="listview"></ul>
</div>
</div>
<div id="good-iscroll-collapsible" data-role="collapsible" data-theme="b">
<h3>JQM ListView with iScroll (I'm flying!)</h3>
<div id='good-iscroll-wrapper' class="scroller">
<ul id="good-iscroll-list" data-role="listview">
</ul>
</div>
</div>
</div>
CSS
.scroller {
position: relative;
z-index:1;
height:400px;
overflow:auto;
}
#good-iscroll-wrapper li {
-webkit-transform : translateZ(0);
-o-transform : translateZ(0);
-moz-transform : translateZ(0);
transform : translateZ(0);
}
JavaScript
$(document).ready(function () {
var slowScroller = new iScroll('slow-iscroll-wrapper');
var goodScroller = new iScroll('good-iscroll-wrapper');
$('#slow-iscroll-collapsible').bind('expand', function () {
slowScroller.refresh();
});
$('#good-iscroll-collapsible').bind('expand', function () {
goodScroller.refresh();
});
fillList();
$('ul').listview('refresh');
});
function fillList(){
for(var i=1;i<=50;i++){
var li = $('<li/>');
var a = $('<a/>');
a.text('List Item ' + i);
li.append(a);
$('ul').append(li);
}
}