JQuery Mobile 1.4 infinite scrolling: window scrolling does not work

Question

In jQuery Mobile 1.4, why is there no $(window).scroll firing? Here's a non-working example trying to detect when a user scrolls to the bottom of the page:

http://jsfiddle.net/5x6T2/

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

All of this worked fine in jQuery Mobile 1.3 until pageshow :

http://jsfiddle.net/Demr7/

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

Does anyone know what to do?

Answer 1

You do not need to use a third-party plugin to achieve endless scrolling. You just need to listen to scrollstart or scrollstop and do some math.

You need $(window).scrollTop() , $.mobile.getScreenHeight() , $(".ui-content").outerHeight() , $(".ui-header").outerHeight() and $(".ui-footer").outerHeight() .

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

Note that you must remove 1px from the found height of each fixed toolbar.

Attach the scrollstop listener to the document , and then define the variable heights.

 $(document).on("scrollstop", function (e) { /* active page */ var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"), /* window scrollTop() */ scrolled = $(window).scrollTop(), /* viewport */ screenHeight = $.mobile.getScreenHeight(), /* content div height within active page */ contentHeight = $(".ui-content", activePage).outerHeight(), /* header height within active page (remove -1 for unfixed) */ header = $(".ui-header", activePage).outerHeight() - 1, /* footer 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 ⁽¹⁾

⁽¹⁾ Tested on iPhone 5 Safari Mobile