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

  • 相关阅读:
    时间日期总览
    Mysql一次更新多条数据
    windows远程桌面连接无法粘贴
    vmware workstation pro密钥
    C#自动生成XML文件
    Mysql 缺少MSVCR120DLL问题
    hdu 5672 Strings 模拟
    poj 1328 雷达覆盖 贪心
    hdu 5667 Sequence (矩阵快速幂)
    CodeForces 652D Nested Segments 树状数组
  • 原文地址:https://www.cnblogs.com/yuyu9988/p/3398834.html
Copyright © 2011-2022 走看看