using iscroll with jquery mobile

Question

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

It all works fine it i disable JQM ajax default navigation but I would like to retain this.

My issue is I cant work out how to successfully call/bind iscroll so it works with the pages that need them. I have tried pageinit() and pagecreate() to no avail.

Any pointers much appreciated.

A.

Answer 1

I initialize/refresh the iScroll instances on the pageshow and orientationchange events. I set a class on data-role="content" divs that I want to be scrollable (in this instance 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();
    }
});