jQuery Mobile 1.4 infinite scrolling: Window scroll not firing

jquery-mobile

Solution

You don't have to use any third party plugin to achieve infinity scrolling. You simply need to listen to either `scrollstart` or `scrollstop` and do some math.

What you need is `$(window).scrollTop()`, `$.mobile.getScreenHeight()`, `$(".ui-content").outerHeight()`, `$(".ui-header").outerHeight()` and `$(".ui-footer").outerHeight()`.

When `$(window).scrollTop()`'s value matches the value of viewport's height minus content div's height plus toolbars height, it means you have reached the bottom of the page.

Note that you should remove `1px` of retrieved height of each fixed toolbars.

Attach `scrollstop` listener to `document` and then define heights variables.

$(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)

(1) Tested on iPhone 5 Safari Mobile

Problem

In jQuery Mobile 1.4, why isn't `$(window).scroll` firing? Here's a non-working example trying to detect when the user has scrolled to the end of the page: http://jsfiddle.net/5x6T2/ ``` $(document).on('pagecontainershow', function () { $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() == $(document).height()) { alert("Bottom reached!"); } }); }); ``` This was all working fine in jQuery Mobile 1.3 prior to the deprecation of `pageshow`: http://jsfiddle.net/Demr7/ ``` $(document).on('pageshow', '.ui-page', function() { $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() == $(document).height()) { alert("Bottom reached!"); } }); }); ``` Anybody know what to do?

Original source