All geek questions in one place

How to find out when the scrollbar reaches the center of the browser in jquery?

How do I know when the browser reaches the center of the browser? I need to download content when the scrollbar reaches the center of the browser, and not reach the end of the browser.

+4
source share
3 answers

Example 1 Download the content when the middle page is reached.

Use the jQuery .scroll() method event to fire the event when the window scrolls.

From there, you can simply use .scrollTop() to get the current browser position associated with the top of the page, and using .height() to get the maximum height of the window and divide by 2 to get the center point.

Once .scrollTop() passes the center point, you find 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'); } });

Demo Screenshot

Example 2 Upload content when the identity element scrolls (it’s more like the way Facebook works, they have the “Load more” element on the page and when it scrolls into this view, it means that you get to the end of the content and load more.

Another method you can use is to use 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)); }

In Scott Dowding in this answer Check if an item is visible after scrolling

What can be used to detect when an item is visible inside the browsers viewing area. With this method, you can have an element at the bottom / in the middle of the page and use .scroll() again to fire the event in the scroll.

When this item comes into view, run your code to download more content or whatever you 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)); }

Demo Screenshot

+3
source

If you need to download content before the user reaches the bottom of the page, you can calculate the hidden lower height of the document on the client’s screen, and then if the height of the bottom of the document is in the specified range, you can run your script, as an example below (with using jQuery):

 $(window).scroll(function () { //calculating the client hidden bottom height of the document var BottomHeight = $(document).height() - $(window).height() - $(window).scrollTop(); //set the min value of the document hidden bottom height var minBHeight = 50; if (BottomHeight < minBHeight ) { alert('Time to load, user is within scroll range!'); } });
+2
source

First you need the overall height of the page, this is done by knowing the height of the <body> element. Then you should know when the center of the page is reached, bodyTotalHeight / 2 Finally, use the scroll event on the window object to determine when the user scrolls on the page. The current scrollbar position is provided to you by the scrollTop function.

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' ); } } );
0
source

Source: https://habr.com/ru/post/1382053/

More articles:


All Articles