using iscroll with jquery mobile binding issue

Question

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

It all works fine if 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.

A basic example of this can be found here: http://bit.ly/ngXkNR

Any pointers much appreciated.

A.

Answer 1

Thanks Jasper, I changed your method a bit, so that you can call iScroll on any wrapper identified with a class. Also I unload and destroy all iScroll instances on the pagehide event - i dont need the refresh method for my needs:

// iScroll variable
var myScroll = [];

$(document).delegate('[data-role="page"]', 'pageshow', function () {

    var $page = $(this);

    // setup iScroll
    $($page.find('.iscroll_wrapper')).each(function(index) {

        var scroller_id = $(this).get(0);

        myScroll.push(
            new iScroll(scroller_id, {
                snap       : true,
                momentum   : false,
                hScrollbar : false
            }));
    });

});

$(document).delegate('[data-role="page"]', 'pagehide', function () {

    // unset and delete iScroll
    for (x in myScroll)
    {
        myScroll[x].destroy();
        myScroll[x] = null;
        myScroll.splice(x, 1);
    }

});