A brief analysis of how jquery determines that the scroll bar has scrolled to the bottom of the page and executes the event_jquery

This article introduces to programmers how jquery determines when the scroll bar has reached the bottom of the page and executes the event. First understand the three dom elements, namely: clientHeight, offsetHeight, and scrollTop.

First understand the 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 scroll bar and is not displayed. content below. 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:

scrollBottomTest =function(){
   $("#contain").scroll(function(){
     var $this =$(this),
     viewH =$(this).height(),//可见高度
     contentH =$(this).get(0).scrollHeight,//内容高度
     scrollTop =$(this).scrollTop();//滚动高度
    //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
    if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
    // 这里加载数据..
    }
   });
}

The above article briefly analyzes how jquery determines when the scroll bar has scrolled to the bottom of the page and executes the event. This is all the content shared by the editor. I hope it can give you a reference, and I hope you will support Script Home more.