JQuery Infinite Scroll within a DIV Without Pagination
I got a task today to add an infinite scroll within a DIV without pagination. I checked several JQuery plugins but none of the plugin fit on my requirements. So, I decided to write a small hack. Here is the code:
<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; //load contents before reaching to the end of the div
if(divPlacement <= screenBottom) {
$('.scrollme').append('<p style="height: 300px; background-color: '+getRandomColor()+'"></p>');
}
//TODO:: Unbind scroll event if there are no more contents
});
});
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>
[leaderboard_middle_ads]
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div style="background-color: green; color: #fff; width: 300px; overflow: auto; float: left;" class="scrollme"> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> </div> <div style="background-color: #0000ee; color: #fff; width: 300px; margin-left: 10px; float: left;"> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> <p>Test text</p> </div>
Few Notes
- Change this code divPlacement -= 300; if you to load contents before user reached to the end of div
- In my situation I always have scrollbar in my page if your page does not have then write a code for that.
Hope that helps you!
[leaderboard_bottom_ads]
