JQuery's Div tag scroll bar property and determine if the vertical scrollbar reaches the bottom

Transferred from: Http://blog.163.com/[email protected]/blog/static/1284651702010894509982/

There are few people who can fully and correctly understand the concept of the scroll bar of JQuery's Div tag.

I know a lot of people disagree with my point of view. But if you go to Baidu Search, and jQuery scroll bar information about the scroll bar appearance and scroll bar plug-in. I recently made a scroll bar related to the page effect, go to the CSDN forum to ask questions, get a piece of code, or wrong.

There are many concepts related to scrollbars in jQuery, but there are three properties that are related to scroll bar dragging: scrolltop, ScrollLeft, ScrollHeight. One of the scrollheight properties is that the Internet has almost no application tips on it, and I just need it.

We now only explore the ScrollTop, ScrollHeight properties related to vertical scrolling.

First, scroll bar about the correct understanding of the properties:

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>

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. Drag the scroll bar down a distance, see the page effect is as follows (the right of a, B is I grab the picture, with PS marked):

So, what exactly is the scrolltop and ScrollHeight properties of the external div here?
Some people say that the scrolltop equals a in the figure. ScrollHeight equals the height of the external div 500px. Actually, it's not right.
In fact, the figure of A, B, we programmed to write JS code does not have any specific significance, it is only symbolic.
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, not the A that the figure has been marked with.
At this point, we are very impressed by the Windows designers, scroll bar design so image wonderful, deceived how many brains simple mouse operator. The distance between A and B, respectively, identifies the scroll bar scrolling and the distance that needs to be scrolled, and there is a corresponding relationship between them, but these are not considered by the programmers of our development application and are considered by programmers who design the GUI graphical interface of the operating system.

Second, judge whether the vertical scroll bar reaches the bottom
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 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, off-topic
To determine whether the vertical scroll bar is dragged to the end, in order to achieve the scroll bar drag real-time dynamic from the Web server to obtain the effect of the content, this I in the article "page loading data effects of novel improvements" mentioned in, Web site:
Http://blog.why100000.com/?p=823ji
With the above front-end jquery code implementation, combined with Ajax technology, it should be easy to achieve the goal.
 

 

 
////////////////////////////////////////////////////////////////////////////////////////////
 
End