使用iScroll和jQuery Mobile

Question

我目前正在尝试将iscroll 4与jQuery Mobile配合使用，但却让我十分苦恼。

如果我禁用JQM ajax默认导航，一切都能正常工作，但我希望保留它。

我的问题是我无法成功地调用/绑定iscroll，使其与需要它们的页面一起工作。 我已经尝试了pageinit()和pagecreate()，但都没有成功。

非常感谢任何指针。

A.

- Adi

Answer 1

我在pageshow和orientationchange事件上初始化/刷新iScroll实例。我在需要滚动的data-role="content" div上设置了一个类（在这个例子中我使用了.content类）。

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

- Jasper

---

你是否在 <script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script> 之前加载 iscroll js？ - Adi

不，这是我加载的最后一个脚本。如果您在初始化iScroll实例时遇到困难，请确保您遵循iScroll网站上的示例。iScoll仅滚动调用它的元素的直接子级。 - Jasper

我可以让它工作，只是无法与JQM ajax导航一起使用。也就是说，如果我到达页面，iscroll将无法工作。如果我刷新该页面，它就可以正常工作（可能是因为它重新读取了所有的js）。目前，iscroll js仍然在html的头部，而不在任何js页面事件中。 - Adi

嗨，这是一个非常粗糙的问题示例（在真实网站上有成千上万个页面）http://bit.ly/ngXkNR - Adi

您正在绑定到 DOMContentLoaded 事件，该事件仅在初始页面加载时触发（而不是通过ajax导航拉入的页面），您想要绑定到以下之一：pageshow、pagecreate、pageinit。请查看我上面的示例，它绑定到 pageshow 事件，然后在该事件处理程序中检查 iScroll 实例是否存在（如果存在，则刷新它），或者如果实例不存在，则创建它。这里有一个链接来解释每个事件：http://jquerymobile.com/demos/1.0rc1/docs/api/events.html。 - Jasper