页面滚动触底加载

这个问题的思路就是内容盒子的内容滑动到最底部的时候，加载新的内容。

判断上述情况需要有三个值：

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("到底啦")
    }
}); 

 

如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。