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>