Example: Judge to the bottom
The code is as follows: |
Copy code |
$ (Window). scroll (function (){ If ($ (document). scrollTop () + $ (window). height () >=$ (document). height ()){ Alert ("Oh, it's the end ."); } }); |
To automatically load content at the bottom. You only need to register a scroll bar event:
First, we pull the scroll bar from the top to the bottom and change the value of scrollTop, which has a range.
This interval is: [0, (offsetHeight-clientHeight)]
That is, the whole process of the scroll bar pulling is within the range of 0 to (offsetHeight-clientHeight.
1. Scroll the scroll bar to the bottom: scrollTop = (offsetHeight-clientHeight)
2. Within 50 px of the scroll bar: (offsetHeight-clientHeight)-scrollTop <= 50
3. scrollTop/(offsetHeight-clientHeight)> = 5%
The code is as follows: |
Copy code |
ScrollBottomTest = function (){ $ ("# Contain"). scroll (function (){ Var $ this = $ (this ), ViewH = $ (this). height (), // visible height ContentH = $ (this). get (0). scrollHeight, // content height ScrollTop = $ (this). scrollTop (); // scroll height // If (contentH-viewH-scrollTop <= 100) {// load the new content when it reaches 100px at the bottom If (scrollTop/(contentH-viewH)> = 0.95) {// load the new content when it reaches 100px at the bottom // Load data here .. } }); } |
Js judgment
Determines whether the vertical scroll bar has reached the bottom
After clarifying the above concepts, encoding is actually relatively simple. The following is the sample code:
The code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <Title> has the drop-down scroll bar rolled to the bottom? </Title> <Script language = "javascript" src = "jquery-1.4.2.min.js"> </script> <Script language = "javascript"> $ (Document). ready (function (){ Var nScrollHight = 0; // The total length of the scroll distance (note that it is not the length of the scroll bar) Var nScrollTop = 0; // The current position to which the page is scrolled. Var nDivHight = $ ("# div1"). height (); $ ("# Div1"). scroll (function (){ NScrollHight = $ (this) [0]. scrollHeight; NScrollTop = $ (this) [0]. scrollTop; If (nScrollTop + 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;"> passed the test in IE and FF </div> </Div> </Body> </Html> |
Code description:
The internal div height is 750, and the external div height is 500. Therefore, the vertical scroll bar must scroll between 750 and 500 = 250 to reach the bottom. For details, see nScrollTop + nDivHight> = nScrollHight.
In the program, the if judgment statement is detected and executed in the scroll (rolling) event of the external div, which consumes a lot of CPU resources. Drag the scroll bar with the mouse. This event is triggered when there is a pixel change. However, if you click the arrow at both ends of the scroll bar, the event trigger frequency is much lower. Therefore, the scroll event of the scroll bar should be used with caution.
In this example, we can see that there is no horizontal scroll bar and there will be small changes in the horizontal scroll bar. Therefore, in the nScrollTop + nDivHight> = nScrollHight statement, you need to use the "> =" comparison operator, and when there is no horizontal scroll bar, the equal sign "=" is enough. You can test it. You can also determine whether the horizontal scroll bar has rolled to the header.