使用iscroll和jquery移动绑定问题

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

});

Answer 2

Follow the example I created for you four days ago ( using iscroll with jquery mobile )... You are binding to an event that only fires on the initial page load and you want to bind to a jQuery Mobile event that fires whenever a new page is added to the DOM.

Change:

var myScroll;
document.addEventListener('DOMContentLoaded', loaded, false);

To:

var myScroll = [];
$(document).delegate('[data-role="page"]', 'pagecreate', function () {
        myScroll[this.id] = new iScroll(this.id + '_wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false
     });
});

Which will require renaming the wrapper div on each page to _wrapper. Which is necessary anyway because each element with an ID needs a unique ID in the DOM.

Link: using iscroll with jquery mobile

--UPDATE--

I have created an example of using iScroll carousels on multiple pages. Notice how I include the custom JavaScript and CSS on each page so if the user refreshes the page (on any page) they will not receive any errors because of missing code.

Here is the link to the working example: http://apexeleven.com/stackoverflow/iScroll/default.html