18

I realize there are several questions here that address the issue of endless scrolling. However most of them are using plugins.

I'd like to know how to implement endless scrolling that would work with my existing paging functionality. Currently I have a "load more" button, when clicked on, will fetch the next 10 items, and append to the list. Instead of doing this when the "load more" button is clicked, I'd like it to happen when the scroll position comes to the bottom. Also, this list is not on the main page, it's within a DIV. Storing the page number in a hidden field with id 'pageNum'.

$.ajax({
        type: "GET",
        url: "/GetItems",
        data: { 'pageNum': $('#pageNum').val() },
        dataType: "json",
        success: function (response) {
                $('#MyDiv ul').append(response.Html);
                $('#pageNum').val(response.PageNum);
            }
        }
});

#MyDiv
{
    border:solid 1px #ccc; 
    width:250px;
    height:500px;
    overflow-y: scroll;
}

<div id="MyDiv">
  <ul>
    <li>...</li>
    ...
  </ul>
</div>
Prabhu
  • 12,995
  • 33
  • 127
  • 210
  • 1
    Probably the simplest way would be to put an element at the very bottom of the list, then when it comes into view you know they scrolled down so you load more. You can find several answers on SO on how to check for an element being in the viewport – Kal_Torak Mar 03 '13 at 01:09
  • Thanks, that sounds like it will work, but exactly how will it integrate with my code here. I found this: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport however, when would I call the elementInViewport function? – Prabhu Mar 03 '13 at 01:16

1 Answers1

40

The simplest way, is to check if you've reached the bottom and to trigger then a click-event on your "load more"-button.

$(window).on('scroll', function(){
    if( $(window).scrollTop() > $(document).height() - $(window).height() ) {
        $("#load-more").click();
    }
}).scroll();

The script above is just an example, don't use it in your production environment.

update

...and the better way is to call the function instead of trigger an event which calls the function.

update2

...and the best way: let the user decide what is to do if he do (in this case he scrolls down to reach the end of your page, not to reach the next page) ;)

yckart
  • 32,460
  • 9
  • 122
  • 129
  • 9
    Instead of `click`ing it would be better to call the function that the button uses. (+1 anyway) – tckmn Mar 03 '13 at 04:39
  • 2
    notice this may not work if you are already at the bottom of a page and refresh it: you are already at the bottom, and the scroll trigger has not fired – Asenar Nov 22 '13 at 15:19
  • 1
    @Asenar I've updated my answer. Triggering the scroll event (or triggering the click event, or even better calling the function that the button uses) on page load should do the trick... – yckart Nov 22 '13 at 16:23
  • A more complete sample would have helped. I got: TypeError: null is not an object (evaluating 'n.body["scroll"+e]') – Jonny Sep 16 '18 at 09:37
  • I need to remove the height of footer div.In this what changes i need to make? :-@yckart – ubm May 19 '21 at 14:27