A method written in jquery to determine the bottom of the div scroll bar "recommended" _jquery

JQuery has a lot to do with the scroll bar, but there are three attributes that are related to the drag of the scroll bar: scrolltop, ScrollLeft, ScrollHeight. One of the scrollheight attributes, the Internet almost does not search for its application skills, and I just need to use it.

We're only going to explore the scrolltop, ScrollHeight properties associated with vertical scrolling.

The correct understanding of the properties of the scroll bar:

Suppose you have the following HTML code:

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

Because the internal div tag is taller than the outside, and the outside Div allows the vertical scroll bar to appear automatically, you can see the vertical scroll bar when you open it with a browser. Scroll down a distance, see the page effect as follows (the right of a, B is I grabbed the map, with PS marked out):

So, what is the scrolltop and scrollheight attributes of the outer div here?

It is said that scrolltop is equal to the figure awarded a. The scrollheight equals the height of the outer div 500px. Actually, it's not right.

In fact, the figure of A, B, to our programming to write JS code does not have any specific significance, it is only symbolic meaning.

In fact, in the JS code, the scroll bar is abstracted as a "point" to treat. ScrollHeight is actually not the "height of the scroll bar" (b), but the height that the scroll bar needs to scroll, that is, the height of the inner div 750px. The scrolltop represents how much of the current position of the scroll bar (a point) is in the 750px, not the "a" shown in the figure.

At this time, we are very impressed by the designers of Windows, the scroll bar design so beautiful image, deceived the number of simple-minded mouse operators. The distance between A and b identifies the scroll bar scrolling and the distance that needs to be scrolled, each of which has a corresponding relationship, but these are not considered by programmers who develop the application, but are considered by programmers who design the GUI graphics interface for the operating system.

2 Determines whether the vertical scroll bar reaches the bottom

To clarify the above concepts, coding is actually relatively simple, the following is the sample code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Code Commentary:

The internal div height is 750, the outer div height is 500, so the vertical scroll bar needs to scroll the 750-500=250 distance, will reach the bottom, see the statement nscrolltop + ndivhight >= nscrollhight.

In the program, it is very consuming CPU resources to detect and execute the IF judgment statement in the scroll (scrolling) event of the external Div. Drag the scroll bar with the mouse to trigger the event whenever a pixel changes. But by clicking on the arrows at both ends of the scroll bar, the event triggers a much lower frequency. So the scroll event of the scroll bar should be used with caution.

This example determines that there is no horizontal scroll bar, when there is a horizontal scroll bar, the situation will be small changes, so the Nscrolltop + ndivhight >= nscrollhight statement, you need to use the ">=" comparison operator, without the horizontal scroll bar, the equal sign "=" is enough. We can actually test it. You can also determine if the horizontal scroll bar is scrolling to the head.

The above one is written in jquery to Judge Div Scroll to the bottom of the method "recommended" is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud habitat community.