js infinite scroll example
Example 1: jquery infinite scroll
$(window).scroll(function () {
// End of the document reached?
if ($(document).height() - $(this).height() == $(this).scrollTop()) {
$.ajax({
type: "POST",
url: "index.aspx/GetData",
contentType: "application/json; charset=utf-8",
data: '',
dataType: "json",
success: function (msg) {
if (msg.d) {
$(".container").append(msg.d);
}
},
error: function (req, status, error) {
alert("Error try again");
}
});
}
});
Example 2: infinite scroll within a div
<script>
$(function(){
$(window).scroll(function () {
var $div = $(".scrollme");
var divPlacement = parseInt($div.offset().top + parseInt($div.height()));
var screenBottom = $(this).scrollTop() + parseInt($(window).height());
divPlacement -= 300;
if(divPlacement <= screenBottom) {
$('.scrollme').append('<p style="height: 300px; background-color: '+getRandomColor()+'"></p>');
}
});
});
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
</script>
Example 3: infinite scroll javascript
<div class="article-feed">
<article class="article">...</article>
<article class="article">...</article>
...
</div>
<div class="scroller-status">
<div class="infinite-scroll-request loader-ellips">
...
</div>
<p class="infinite-scroll-last">End of content</p>
<p class="infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>