jquery-mobile - jQuery Mobile 1.4 无限滚动 : Window scroll not firing

Question

在 jQuery Mobile 1.4 中，为什么不是 $(window).scroll开火？这是一个尝试检测用户何时滚动到页面末尾的无效示例:

http://jsfiddle.net/5x6T2/

$(document).on('pagecontainershow', function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("Bottom reached!");
        }
    });
});

在弃用 pageshow 之前，这一切在 jQuery Mobile 1.3 中运行良好:

http://jsfiddle.net/Demr7/

$(document).on('pageshow', '.ui-page', function() {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            alert("Bottom reached!");
        }
    });
});

有人知道该怎么做吗？

Answer 1

您不必使用任何第三方插件来实现无限滚动。您只需要收听 scrollstart 或 scrollstop 并做一些数学运算。

您需要的是$(window).scrollTop() , $.mobile.getScreenHeight() , $(".ui-content").outerHeight() , $(".ui-header").outerHeight()和 $(".ui-footer").outerHeight() .

当$(window).scrollTop()的值与视口(viewport)高度减去内容 div 高度加上工具栏高度的值相匹配，这意味着您已到达页面底部。

请注意，您应该删除 1px每个固定工具栏的检索高度。

附上scrollstop收听 document然后定义高度变量。

$(document).on("scrollstop", function (e) {

        /* active page */
    var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),

        /* window's scrollTop() */
        scrolled = $(window).scrollTop(),

        /* viewport */
        screenHeight = $.mobile.getScreenHeight(),

        /* content div height within active page */
        contentHeight = $(".ui-content", activePage).outerHeight(),

        /* header's height within active page (remove -1 for unfixed) */
        header = $(".ui-header", activePage).outerHeight() - 1,

        /* footer's height within active page (remove -1 for unfixed) */
        footer = $(".ui-footer", activePage).outerHeight() - 1,

        /* total height to scroll */
        scrollEnd = contentHeight - screenHeight + header + footer;

    /* if total scrolled value is equal or greater
       than total height of content div (total scroll)
       and active page is the target page (pageX not any other page)
       call addMore() function */
    if (activePage[0].id == "pageX" && scrolled >= scrollEnd) {
        addMore();
    }
});

Demo ⁽¹⁾

(1) 在 iPhone 5 Safari Mobile 上测试