jQuery Mobile 1.4无限滚动:窗口滚动不会触发

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

在弃用之前,这在jQuery Mobile 1.3中都运行良好pageshow:

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()值与视口高度减去内容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();
    }
});

演示 ⁽¹⁾

⁽¹⁾在iPhone 5 Safari Mobile上测试