Element scroll to bottom principle

Element scrolling to the bottom principle

element.scrollHeight - element.scrollTop === element.clientHeight

1. Judging that the scroll bar scrolls to the bottom: scrollTop == (scrollHeight – clientHeight)
2. Within 50px of the scroll bar from the bottom: (scrollHeight – clientHeight) – scrollTop <= 50
3. 5% of the scroll bar from the bottom Within: scrollTop / (scrollHeight – clientHeight) >= 0.95

The event handling is as follows:

var clientHeight = ele.clientHeight; // height of the element window (will not change)   
$(ele).scroll( function (event){  
     var scrollTop = ele.scrollTop; // current scrollbar position     
    var scrollHeight = ele.scrollHeight; // Total height of scroll bar      
    if (scrollTop + clientHeight >= scrollHeight) {            
        showMore();  
    }    
});  

Several height differences:

clientHeight = height+padding-the height of the horizontal scrolling axis, which is the height of the visible area
offsetHeight = padding+height+border+the height of the horizontal scrolling axis, the visible area plus the height of the scrolling axis
scrollHeight = the height of the scrolling area of ​​the element, greater than or equal to offsetHeight

The method of obtaining the height of the window is as follows

var doc = document.documentElement || document.body;
var scrollTop = doc.scrollTop;
var scrollHeight = doc.scrollHeight;
var clientHeight = doc.clientHeight;

The height of the screen can also be used

window.getBoundingClientRect().height || window.innerHeight

 

Reference: https://blog.csdn.net/wangjun5159/article/details/54916404