元素滾到到底部原理

看風景就發表於2018-05-09

元素滾動到底部原理

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

相關文章