CODEWITHSUNDEEP
javascriptjqueryscroll
Ryan Saxe
Ryan Saxe

Reputation: 17859

Detect if scrolling is possible on a page

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

Upvotes: 1

Views: 279

Answers (2)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33870

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/

Upvotes: 2

Stephan Ahlf
Stephan Ahlf

Reputation: 3497

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

Upvotes: 0

Related Questions