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

  • 相关阅读:
    指定盘符获取u盘PID、VID、序列号等信息
    禁用u盘再启用
    golang 使用编译选项-H=windowsgui后,仍然输出log到console
    c#实现"扫描检测硬件改动"
    哈希表
    Python 环境搭建
    Python 简介
    Python 基础教程
    7.1.2 定义改进的Sales_date类
    第七章 类
  • 原文地址:https://www.cnblogs.com/yuyu9988/p/3398834.html
Copyright © 2011-2022 走看看