7

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?

Mark Boulder
  • 13,577
  • 12
  • 48
  • 78
  • You can bind it to a specific page. But as of JQM 1.4.3 that event is deprecated and replaced with pagecontainercreate which can't be bound to a specific page. – Omar Jul 14 '14 at 00:53
  • I tried that but it seems `$(window).scroll` will still not fire. I looked into the onPage plugin as described at http://gajotres.net/page-events-order-in-jquery-mobile-version-1-4-update/ as well but still no luck. – Mark Boulder Jul 14 '14 at 00:59
  • All I'm trying to do is detect when the user has scrolled to the bottom using `$(window).scroll` (not `$(document).scroll`) so I can do some infinite scrolling operations. – Mark Boulder Jul 14 '14 at 01:01
  • you can listen to `scrollstart` and/or `scrollstop`, then calculate `$(window).scrollTop()` if it equals to `$(".ui-content").outerHeight() - $.mobile.getScreenHeight() - toolbars outer height` means you have reached the end of the page. If you want I can post a detailed answer. – Omar Jul 14 '14 at 01:13
  • I'm not sure. Do you think it could help? Here's my actual use case on 1.4: http://jsfiddle.net/94hcm/ (here with 1.3: http://jsfiddle.net/pBGU6/) – Mark Boulder Jul 14 '14 at 01:27
  • 3
    check this http://jsfiddle.net/Palestinian/r6T8S/show/ – Omar Jul 14 '14 at 01:54
  • 1
    Really nice fiddle thanks a lot! – Mark Boulder Jul 14 '14 at 02:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57276/discussion-between-omar-and-mark-boulder). – Omar Jul 14 '14 at 15:10

1 Answers1

22

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

Omar
  • 32,302
  • 9
  • 69
  • 112