A method written in jquery to determine the scroll bar of a div to the bottom

Source: Internet
Author: User
This article describes a method written by jquery to judge the bottom of a div scroll bar. colleagues will introduce scrollTop, scrollLeft, and scrollHeight attributes in javascript to the coders, for more information, see. There are many concepts related to the scroll bar in jQuery, but there are three attributes related to the scroll bar dragging: scrollTop, scrollLeft, and scrollHeight. Among them, the scrollHeight attribute is almost impossible to search for it on the Internet, and I just need to use it.

Now we only discuss scrollTop and scrollHeight attributes related to vertical scrolling.

I. correct understanding of attributes related to the scroll bar:

Suppose there is the following Html code:

Because the height of the internal p label is longer than that of the external, and the external p allows the vertical scroll bar to appear automatically, you can see the vertical scroll bar after opening it in a browser. Drag the scroll bar down for a while and see the following page effect (a and B on the right are marked by PS after I capture the image ):

So what are the scrollTop and scrollHeight attributes of the external p here?
Someone said that scrollTop is equal to a marked in the figure. ScrollHeight is equivalent to PX of the external p. Actually, none of them are correct.
In fact, the numbers a and B shown in the figure do not have any specific significance for programming js code. they are only symbolic.
In fact, in JavaScript code, the scroll bar is abstracted as a "point" for treatment. ScrollHeight is not actually "the height of the scroll bar" (B), but the height of the scroll bar to be rolled, that is, the internal height of p is PX. ScrollTop indicates the current position of the scroll bar (a point) in 750px, rather than a as shown in the figure.
At this time, we are amazed at the design of Windows designers. the scroll bar design is so beautiful that it deceives many simple-minded mouse operators. The distance between a and B respectively identifies the scroll bar and the distance to be rolled. there is a corresponding relationship between them, but these are not considered by our application developers, it is a programmer who designs the GUI interface of the operating system.

2. determine 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:

               
        Has the scroll bar rolled to the bottom?      

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.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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