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.

Solution

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();
    }
});

Comments

[Adi]

do you load iscroll js before <script src="code.jquery.com/mobile/1.0rc1/…>?

[Jasper]

No it's the last script I load. If you are having a hard time initializing the iScroll instances, make sure you are following the example on the iScroll site. iScoll only scrolls the immediate child of the element you call it on.

[Adi]

i can get it working, just not with JQM ajax navigation. i.e. if i get to the page iscroll isnt working. if i refresh that page it works fine (presumable becasue it reads all the js again) at present iscroll js is in head of html still and not in any page event in js

[Adi]

Hi, here is a very rough example of the issue (there are thousands more pages in the real site) bit.ly/ngXkNR

[Jasper]

You are binding to the DOMContentLoaded event which is only fired when the initial page is loaded (and not on pages pulled-in through the ajax navigation) and you want to bind to one of the following: pageshow, pagecreate, pageinit. Check-out my example above that binds to the pageshow event and then inside that event handler I check if the iScroll instance exists (I then refresh it if it exists) or if the instance does not exist I create it. Here's a link to explain each event: jquerymobile.com/demos/1.0rc1/docs/api/events.html.