这个问题的思路就是内容盒子的内容滑动到最底部的时候,加载新的内容。
判断上述情况需要有三个值:
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("到底啦") } });
如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。