Detect if scrolling is possible on a page

Question

I have a function that adds more content to the container when the viewer has scrolled close to the place where the end of the container is. It works perfectly:

var elem = $('#cont');
var bo = $('body');
$(window).scroll(function(){
    if (elem.outerHeight() - bo.scrollTop() - 350 <= 0) {
        for(var i = 0; i < 3; i++){
            elem.append('<div class="box"></div>');
            $('.box').each(function(){
                $(this).fadeIn('slow');
            });
        };
    };
});

The issue, is if there is not enough content loaded originally, then it can't load more ever!

What I need to do:

I need to detect if the body cannot scroll. So I can append content until scrolling is possible. How can I do that?

Jsfiddle

Answer 1

You can do this :

while($(document).height() <= $(window).height()){
    $('#cont').append($('<div/>', {class : 'box', style : 'display : block'}))
}

$('.box').hide().fadeIn('slow');

Fiddle : http://jsfiddle.net/FYtZX/1/

Answer 2

You can use this function to detect if something is scrollable. https://github.com/sa/jQuery.readMore/blob/master/jquery.readmore.js#L6