Few people can understand jquery's Div label's scroll bar completely and correctly.
I know many people disagree with my point of view. However, if you search for elements on Baidu, the information related to the jquery scroll bar is about the scroll bar appearance and the scroll bar plug-in. I recently created a page effect related to the scroll bar. I went to the csdn forum to ask a question and got a piece of code, which is still incorrect.
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:
<Div id = "div1" style = "overflow-Y: auto; overflow-X: hidden; Height: 500px;">
<Div style = "height: 750px;">
</Div>
</Div>
Because the height of the internal Div label is longer than that of the external Div, and the external Div 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 Div here?
Someone said that scrolltop is equal to a marked in the figure. Scrollheight equals to 500px of the external Div. 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 height of the internal div is 750px. 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:
<! 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.
Iii. digress
To determine whether a vertical scroll bar is dragged to the header, it is used to dynamically obtain the content from the Web server in real time when the scroll bar is dragged, this is what I mentioned in the article "innovative improvements to data loading by page". url:
Http://blog.why100000.com /? P = 823
With the above front-end jquery code implementation, combined with Ajax technology, it should be easy to achieve the goal.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
