頁面滾動觸底加載

這個問題的思路就是內容盒子的內容滑動到最底部的時候，加載新的內容。

判斷上述情況需要有三個值：

1、內容盒子的高度

2、盒子里內容的總高度

3、滾動條的scrollTop

獲取到三個值以后，只需要判斷內容盒子的高度+滾動條的scrollTop = 盒子內容的高度即為觸底。

以window為例方法如下：

$(window).scroll(function(){  
    var wScrollY = window.scrollY;              // 當前滾動條top值  
    var wInnerH = window.innerHeight;           // 設備窗口的高度
    var bScrollH = document.body.scrollHeight;  // body總高度   
    if (wScrollY + wInnerH >= bScrollH-10) {            
        console.log("到底啦")
    }    
});  

以自定義盒子為例：

$(".box").scroll(function(){
 var $this =$(this),
 var scrollTop =$(this).scrollTop();        //滾動條top值  
 var viewH =$(this).innerHeight(),          //盒子高度 
 var contentH =$(this).get(0).scrollHeight, //盒子內容高度
    if(scrollTop + viewH >= contentH-10) { //到達底部10px時,加載新內容
        console.log("到底啦")
    }
}); 

 

如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。