Using iscroll with jQuery mobile

Question

Im currently pulling my hair trying to get iscroll 4 working with jQuery Mobile.

Everything works fine, I disabled JQM ajax by default, but I would like to keep this.

My problem is that I cannot decide how to successfully call / bind iscroll so that it works with the pages that need them. I tried pageinit () and pagecreate () to no avail.

Any pointers are greatly appreciated.

a.

Answer 1

I initialize / update iScroll instances in pageshow and orientationchange events. I set the class to data-role="content" divs, which I want to scroll through (in this case, I used the .content class).

 var myScroll = []; $(document).delegate('[data-role="page"]', 'pageshow', function () { if ($.mobile.activePage.find('.content').length > 0) { if (this.id in myScroll) { myScroll[this.id].refresh(); } else { myScroll[this.id] = new iScroll($.mobile.activePage.find('.content')[0].id, { hScroll : false, vScroll : true, hScrollbar : false, vScrollbar : true, fixedScrollbar : true, fadeScrollbar : false, hideScrollbar : false, bounce : true, momentum : true, lockDirection : true }); } } }); $(window).bind('orientationchange', function () { if ($.mobile.activePage[0].id in myScroll) { myScroll[$.mobile.activePage[0].id].refresh(); } });