How can I know when the scrollbar reaches the center of the browser in jquery?

Question

How can I know when a browser reaches the center of the browser? I need to load contents when scrollbar reaches the center of the browser instead of reaching the end of the browser.

Answer 1

Example 1 - Load content when middle of page reached

Make use of the jQuery .scroll() method event to fire an event when the window is scrolled.

From there you can simply use .scrollTop() to get the current position in the browser related to the top of the page, along with using .height() to get the max height of the window and dividing by 2 to get the center point.

Once .scrollTop() is pass the center point you have found the middle.

$(window).scroll(function() {
    if ($(window).scrollTop()  > $(window).height() / 2)
    {
        // middle of page hit, load extra content here
        alert('You are in the middle of the page');

        // Uncomment out the line below to unbind the scroll event if the 
        // execution of this code is only desired once.
        // $(this).unbind('scroll');
    }
});

Fiddle Demo

---

Example 2 - Load content when an identifying element scrolls into view (this is more similar to how Facebook works, they have a "Load More" element on there page and when its scrolled into view that means you reach the end of the content and to load more.

Another method you can use is to make use of this function

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

By Scott Dowding in this answer Check if element is visible after scrolling

Which can be used to detect when an element is visible inside the browsers viewing area. With such a method you can have an element at the bottom/middle of your page and again make use of .scroll() to fire an event on scroll.

When that element comes into view, fire your code to load more content or whatever you want to do.

$(window).scroll(function () {
    if (isScrolledIntoView($('#loadmorecontent')))
    {
        // element has been scrolled into view, load extra contents here
        alert('element scrolled into view');

        // Uncomment out the line below to unbind the scroll event if the 
        // execution of this code is only desired once.
        // $(this).unbind('scroll');
    }
});

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

Fiddle Demo

Answer 2

If you need to load content before the user reaches the bottom of the page, you can calculate the hidden bottom height of the document on the client's screen, then if the document's bottom height is within a set range, you can fire up your script like the example below (using jQuery):

$(window).scroll(function () {
    //calculating the client's hidden bottom height of the document
    var BottomHeight = $(document).height() - $(window).height() - $(window).scrollTop();
    //set the min value of the document's hidden bottom height
    var minBHeight = 50;

    if (BottomHeight < minBHeight ) {
         alert('Time to load, user is within scroll range!');
        }
});