无限下拉实现原理

随着瀑布流的布局深入人心，传统意义上的翻页已经不能满足用户的需求。

现在越来越多的网站，使用无限下拉的方式来展现内容，

那它的原理是什么了？

1.首先预先加载一部分内容，并显示出滚动条。

2.监听浏览器滚动条。

3.当滚动条快到浏览器底部的时候，触发请求。

4.加载新的页面

代码如下

<script>

   

var  bodyObj=document.documentElement||document.body;

   scrollTop=bodyObj.scrollTop,

   browseHeight=bodyObj.clientHeight||window.innerHeight;

 

   window.onscroll=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，所以当它们到相差很小的时候，说明就已经到页面的底部了。