infinite scroll div code example

Example: 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; //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>

Tags:

Html Example