JS method to determine whether the scroll bar has scrolled to the bottom of the page and execute the event

JS method to determine whether the scroll bar has scrolled to the bottom of the page and execute the event_javascript skills

WBOY

Release： 2016-05-16 16:25:39

Original

1688 people have browsed it

You need to understand three dom elements, namely: clientHeight, offsetHeight, and scrollTop.

clientHeight: The height of this element occupies the height of the entire space. Therefore, if a div has a scroll bar, the height does not include the content below the scroll bar that is not displayed. It's just the height of the DIV.

offsetHeight: refers to the height of the element content. According to the above, this height is the height inside the DIV, including the visible part and the invisible part under the scroll bar.

scrollTop: What is this? It can be understood as the length that the scroll bar can scroll.

For example, if the height of a DIV is 400px (that is, clientHeight is 400), and the content inside is a long list, the height of the content is 1000px (that is, offsetHeight is 1000). So, we see 400px in the visible part, and there is still 600px invisible in the 1000px content. As for this invisible part, we can display this part by pulling the scroll bar. If the scroll bar is not pulled, scrollTop is 0 at this time. If you pull the scroll bar to the bottom and the bottom part of the list is displayed, scrollTop is 600. So the value range of scrollTop is [0, 600]. So this 600 can be understood as the length that the scroll bar can scroll.

After understanding the above concept. It's easy to determine whether to scroll to the bottom.

First, we pull the scroll bar from the top to the bottom. What changes is the value of scrollTop, and this value has a range.
This interval is: [0, (offsetHeight - clientHeight)]
That is, the change in the entire process of scroll bar pulling is within the range of 0 to (offsetHeight – clientHeight).

1. Determine whether the scroll bar has scrolled to the bottom: scrollTop == (offsetHeight – clientHeight)
2. Within 50px from the bottom of the scroll bar: (offsetHeight – clientHeight) – scrollTop <= 50
3. Within 5% of the scroll bar’s bottom: scrollTop / (offsetHeight – clientHeight) >= 0.95

Same as above.

If you want to pull to the bottom to automatically load content. Just register a scroll bar event:

Copy code The code is as follows:

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 reaching the bottom 100px, load new content 

If(scrollTop/(contentH -viewH)>=0.95){ //When reaching the bottom 100px, load new content

//Load data here..

}

});

}