Home > Developer > Web Develop

jquery detects if scroll bar (scroll) reaches the bottom

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

First, the jquery detection browser window scroll bar to reach the bottom
jquery Gets the location and dimension correlation functions:
$ (document). Height () Gets the entire page
A $ (window). Height () Gets the height of the portion of the page that is currently visible to the browser. This size changes when you zoom the browser window size, not the same as document
scrolltop () gets the offset from the top of the scrollbar relative to the element.
scrollleft () gets the offset to the left of the matching element relative to the scrollbar.
scroll ([[DATA],FN]) violation of scroll event when scroll bar changes
jquery detects that the scrollbar reaches the bottom of the code:

$ (document). Ready (function() {  $ (window). Scroll (function() {      if (document). ScrollTop () <=0) {      alert ("The scroll bar has reached the top of 0");    }       if (document). ScrollTop () >= $ (document). Height ()- $ (window). Height ()) {      alert ("The scroll bar has reached the bottom of" + $ (document). ScrollTop ());   });

Second, jquery detection div in the scroll bar to reach the bottom
The first half introduces the jquery detection browser window scroll bar to the bottom, but does not understand the scrolltop and scrollheight concepts, usually the scroll bar is placed in the Div.

<id= "div1" style= "overflow-y:auto; overflow-x:hidden; height:500px;" <style= "height:750px;" </div></div>

Since the internal DIV tag is taller than the outside, and the external Div allows the vertical scrollbar to appear automatically, you can see the vertical scroll bar when you open it with a browser.

So, what exactly is the scrolltop and ScrollHeight properties of the external div here?
In fact, in the JS code, the scroll bar is abstracted as a "point" to be treated. ScrollHeight is not actually "the height of the scrollbar" (b), but rather indicates the height at which the scrollbar needs to scroll, that is, the height of the inner div is 750px. The scrolltop indicates how much the current position of the scroll bar (a point) occupies in 750px.

Determine if the vertical scroll bar reaches the bottom

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> $ (document). Ready (function (){       varnscrollhight = 0;//total length of scrolling distance (note not the length of the scroll bar)       varnscrolltop = 0;//Scroll to the current position       varNdivhight = $ ("#div1"). Height (); $("#div1"). Scroll (function() {nscrollhight= $( This) [0].scrollheight; Nscrolltop= $( This) [0].scrolltop; varPaddingbottom = parseint ($ ( This). CSS (' Padding-bottom ')), Paddingtop = parseint ($ ( This). CSS (' padding-top ') ); if(nscrolltop + paddingbottom + paddingtop + ndivhight >=nscrollhight) Alert ("Scroll bar to the bottom.");     });     }); </script> <body> <div id= "Div1" style= "Overflow-y:auto; Overflow-x:hidden; height:500px; " > <div style= "background-color: #ccc; height:750px; " >ie and FF under test through </div> </div> </body> 
Code Commentary:
The internal div height is 750, the external div height is 500, so the vertical scroll bar needs to scroll 750-500=250 distance, it will reach the bottom, see statement nscrolltop + ndivhight >= nscrollhight.
In the program, the Scroll (scrolling) event in the external Div detects and executes the IF judgment statement, which consumes CPU resources very much. Drag the scrollbar with the mouse to trigger the event whenever there is a change in the pixel. But by clicking the arrows at both ends of the scroll bar, the event is triggered much less frequently. So the scroll event of the scrollbar should be used with caution.
This example determines that there is no horizontal scrollbar, where there is a slight change in the horizontal scrollbar, so the Nscrolltop + ndivhight >= nscrollhight statement requires a ">=" comparison operator, but no horizontal scrollbar, the equals sign "=" is enough. You can actually test it. You can also tell if the horizontal scroll bar is scrolling to the end.
Third , jquery scroll bar to reach the bottom load data
Msg_list_loading =false; $('. Msg_list '). On (' scroll ',function(){        if( !msg_list_loading)        {load_more_msg (); }    })        functionload_more_msg () {varMsg_list = $ ('. Msg_list ')); if(nscrolltop + paddingbottom + paddingtop + ndivhight >=nscrollhight) {msg_list_loading=true; Msg_list.append (' <div class= ' loading ' ></div> '); $.get (' ajax_data.html '). Done (function(data) {Msg_list.find (". Loading"). Remove ();                Msg_list.append (data); Msg_list_loading=false;                    }); }     } 
jquery detects if scroll bar (scroll) reaches the bottom

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
scroll up down jquery example elasticsearch scroll scroll divider scroll flags trackball scroll scroll vector cartoon scroll

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More