Home > Others

JQuery determines the script for rolling the scroll bar to the bottom of the page

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

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.

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:
get the permalink s8 bottom bar s8 bottom bar how to see script of web page what determines properties of object how to make background image scroll with page jquery smooth div scroll example

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