zoukankan      html  css  js  c++  java
  • 无限下拉实现原理

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

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

    那它的原理是什么了?

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

  • 相关阅读:
    8皇后问题
    求1到n,n个整数的全排列
    求最小周期串
    如何用java完成一个中文词频统计程序
    蛇形矩阵
    第一个算法程序
    java 继承练习题8
    java 继承练习题7
    java 继承练习题6
    java 继承练习题5
  • 原文地址:https://www.cnblogs.com/yuyu9988/p/3398834.html
Copyright © 2011-2022 走看看