Ajax infinite scroll function not firing on mobile

Question

I have a website which contains a newsfeed much like facebook. This newsfeed makes use of infinite scrolling when the user reaches the bottom of the page. Everything works perfectly when the website is being viewed on a desktop browser, however when it is being viewed on a my iphone, the function does not fire unless I scroll to the firing point slowly.

To clarify, if I scroll all the way to the bottom at normal speed, it goes past the point whereby the function should have fired and nothing happens. If I then scroll slowly back up the page slightly (100 pixels ish), the function will be called. Likewise if I happen to be scrolling down the page slowly, the function will be called. So it is when I scroll fast (or normal speed), that the function is not called.

Here is the function I am using:

<script language="javascript">
            $(document).ready(function() {
               //Variable declarations for function
                $(window).scroll(function() {
                    if($(window).scrollTop() == $(document).height() - $(window).height()) {
                        //Function goes here
                    }
                })
            });
        </script>

I tried replacing the if statement condition with the following condition which works in terms of getting the function to fire, but all the posts are loaded at once rather than loading 5 every time the user gets to the bottom of the page.

if ($(window).scrollTop() >= $(document).height() - $(window).height() - 60)

Any ideas what the issue is?

Answer 1

For mobile devices you need to bind additional event called touchmove :

$('html,body').bind('touchmove', function(e) { 
    //you code here
});

Answer 2

Touch devices have their own events, so you have to catch both. See if this helps:

<script language="javascript">

        // infiniteScroll function
        function infiniteScroll() {
                if($(window).scrollTop() == $(document).height() - $(window).height()) {
                    //Function goes here
                }
            }
        $(document).ready(function() {
            // bind the function to all needed events
            $(window).on('scroll',infiniteScroll);
            $(window).on('touchmove',infiniteScroll);
        });
    </script>

Answer 3

I think it is because of height of android status bar, on something like this, because when I wrote:

if (document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight > 0) {
          //load more list here
        },

did not work on mobile device, so i kept monitoring the result of

document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight

while scrolling up and down, the max of result was almost -56 (in my device: Samsung A70) so I changed code like this:

if (document.documentElement.offsetHeight+document.documentElement.scrollTop-document.documentElement.scrollHeight + 100 > 0) {
          //load more list here
        },

and it worked!