元素滚到到底部原理

元素滚动到底部原理

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

另外一种判断方法（元素占据整屏适用）

element.getBoundingClientRect().bottom - element.clientHeight < threshold

1、判断滚动条滚动到最底端： scrollTop == (scrollHeight – clientHeight)
2、在滚动条距离底端50px以内： (scrollHeight – clientHeight) – scrollTop <= 50
3、在滚动条距离底端5%以内： scrollTop / (scrollHeight – clientHeight) >= 0.95

事件处理如下：

var clientHeight = ele.clientHeight; // 元素窗口的高度（不会变）  
$(ele).scroll(function(event){  
    var scrollTop = ele.scrollTop; // 当前滚动条位置    
    var scrollHeight = ele.scrollHeight; // 滚动条总高度     
    if (scrollTop + clientHeight >= scrollHeight) {            
        showMore();  
    }    
});  

几种高度的区别：

clientHeight = height+padding-横向滚动轴高度，就是可视区域高度
offsetHeight = padding+height+border+横向滚动轴高度，可视区域加上滚动轴的高度
scrollHeight = 元素的滚动区域高度，大于等于offsetHeight

window的高度获取方法如下

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

屏幕的高度还可以使用

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

 

参考： https://blog.csdn.net/wangjun5159/article/details/54916404