Endless scrolling on mobile device

Question

I'm having some trouble implementing endless scrolling for a list in my jQuery Mobile application. The code i am using now is this:

$(window).on('scrollstop', function () { 
  if ($(window).scrollTop() >= $(document).height() - $(window).height() - 20) {
    if(scrollLoad && currentPage < totalPages)
    {
      $.mobile.showPageLoadingMsg();
      ShowMoreThings();
      scrollLoad = false; //Is set to true on ajax success in ShowMoreThings().
    }
  }
});

This however does not cause the refresh to always trigger. The problem seems to be that the event triggers as soon as the user releases the screen, and the viewport keeps moving after this (due to the way scrolling usually works on mobile devices). The event will then calculate the position while it is still moving and not trigger the refresh since it has not reached the bottom. And then, with the viewport now at the bottom of the page, no further scroll events are triggered if the user tries to scroll further down as the viewport doesn't move. To trigger it, i need to scroll slightly up and then down again.

I tried listening to scrollstart too, but it doesn't trigger attempting to scroll into "nonexistant space".

Answer 1

我发现使用onscroll事件绑定我在jquery mobile中的无尽滚动更加可靠。

Answer 2

Take a look at jQuery waypoints http://imakewebthings.com/jquery-waypoints/ . You can use the waypoint to trigger a fetch of more data.

Answer 3

So, after some experimenting and trying other solutions it seems there was a simple and rather obvious solution to the problem. If i increased the margin for scrolling, ie the 20 pixels from the question to 200 it will always trigger, no matter the speed of the scrolling or if i release the screen before it has reached within 200 pixels of the bottom of the page.

I have no idea when the event triggers or why it works. Either way, it works now, and having a larger margin than 20 is probably better anyway since it begins loading new content before the user has seen all the existing content.