Question

I want to load data when the user drags the scroll bar to rhw end. Basically, when the scroll bar gets very close to the end of the div or page, before touching the end of the div or the page i want the data to be loaded.

The logic I have here for detecting that the scroll bar has reached the end of div or page is below:

first one is for page end

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        var new_div = '<div class="new_block"></div>';
        $('.main_content').append(new_div.load('/path/to/script.php'));
    }
});

second one is for divend

$('.some_element').bind('scroll', function(){
    if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){
        var new_div = '<div class="new_block"></div>';
        $('.main_content').append(new_div.load('/path/to/script.php'));
    }
});

So, want do I need to modify in the above code which enables my routine to called before the scroll bar reaches very close to the page or div end?

Answer 1

Change $(window).scrollTop() + $(window).height() == $(document).height() to

$(window).scrollTop() + $(window).height() >= $(document).height() - 200

The subtraction means that the bottom of the viewport is compared to a point 200px further up. Note that == is changed to >= as well.