How does jquery determine to roll the scroll bar to the bottom of the page and execute the Event _ jquery

How does jquery determine that the scroll bar is rolled to the bottom of the page and an event is executed? The following small make up will bring you a jquery judgment scroll bar to the bottom of the page and execute the event method. I hope it will be helpful to everyone. Let's take a look at the small Editor. This article will introduce codenong to jquery how to judge how to roll the scroll bar to the bottom of the page and execute the event. First, understand the three dom elements: clientHeight, offsetHeight, and scrollTop.

First, understand the three dom elements: clientHeight, offsetHeight, and scrollTop.

ClientHeight:The height of this element occupies the height of the entire space. Therefore, if a p has a scroll bar, the height does not include the content of the following section not displayed by the scroll bar. It's just the height of the DIV.

OffsetHeight:The height of the element content. According to the above, the height is the internal height of the DIV, including the visible part and the invisible part under the scroll bar.

ScrollTop:What is this? It can be understood as the scroll bar's scroll length.

For example, if the height of a DIV is 400px (clientHeight is 400), the content in the DIV is a very long list, and the height of the content is 1000px (offsetHeight is 1000 ). In the visible part, we can see 400px, and 600px is invisible in 1000px. This invisible part is displayed only by pulling the scroll bar. If the scroll bar is not pulled, scrollTop is 0. If you pull the scroll bar to the bottom of the list, scrollTop is 600. Therefore, the value range of scrollTop is [0,600]. So this 600 can be understood as the scroll length of the scroll bar.

After understanding the above concepts. You can easily determine whether to scroll to the bottom.

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%

As shown above.
To automatically load content at the bottom. You only need to register a scroll bar event:

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) {// when it reaches 100px at the bottom, load new content if (scrollTop/(contentH-viewH)> = 0.95) {// load new content when it reaches the bottom of 100px // load data here ..}});}

The above analysis shows how jquery judges that rolling the scroll bar to the bottom of the page and executing the event is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support me a lot.