随着瀑布流的布局深入人心,传统意义上的翻页已经不能满足用户的需求。
现在越来越多的网站,使用无限下拉的方式来展现内容,
那它的原理是什么了?
1.首先预先加载一部分内容,并显示出滚动条。
2.监听浏览器滚动条。
3.当滚动条快到浏览器底部的时候,触发请求。
4.加载新的页面
代码如下
<script>
var bodyObj=document.documentElement||document.body;
scrollTop=bodyObj.scrollTop,
browseHeight=bodyObj.clientHeight||window.innerHeight;
window.οnscrοll=function(){
debugger;
var currentScrollTop=bodyObj.scrollTop,
pageHeight=bodyObj.scrollHeight;
document.title=currentScrollTop+"|"+browseHeight;
if(pageHeight-(browseHeight+currentScrollTop)<100){
document.title="到底部了!";
}else{
document.title="还没有到了!";
}
}
</script>
如果判断滚动条到达页面的底部了?
首先要获得页面总高度和当前滚动条上底部的高度。
因为scrollTop+browseHeight=pageHeight,所以当它们到相差很小的时候,说明就已经到页面的底部了。