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.
3 Answers
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');
}
});
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));
}

- 1
- 1

- 4,400
- 1
- 20
- 35
-
No problem, don't forget to finish the whole cycle to your questions; if this answer solved your question, please mark the question as answered by checking the box next to this answer. This helps build up your own reputation which will only benefit you and the community by letting others know what solved your problem. – Jeff Wilbert Nov 19 '11 at 20:22
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 minimumBottomHeight= 50;
if (BottomHeight < minimumBottomHeight ) {
alert('Time to load, user is within scroll range!');
}
});

- 421
- 4
- 6
First you need the total height of the page, this is done by knowing the height of the <body>
element. Next you have to know when the center of the page has been reached, bodyTotalHeight / 2
Finally use the scroll
event on the window object
to detect when the user do the scrolling on the page. The current position of the scrollbar is given to you by the function scrollTop
.
Here you have the code:
var windowElem = $( window );
var mediumHeight = $( 'body' ).height() / 2;
windowElem.bind( 'scroll', function( e ) {
if( windowElem.scrollTop() >= mediumHeight ) {
console.log( 'loading new content...' );
windowElem.unbind( 'scroll' );
}
} );

- 136
- 2