滚动条滚动到页面底部继续加载的处理实例_ajb11683的博客-程序员宅基地

技术标签: ViewUI  javascript  

  这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。

  原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下

  滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。

  实例

    <style type="text/css">
    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
     
      margin: 0;
      padding:0;
    }
    *{
     
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
      .waterfllow-loading{
     
      z-index: 2000;
      display:none;
    }
    .waterfllow-loading.active{
     
      display:block;
    }
    .waterfllow-loading img.loading-progress{
     
      position: fixed;
      /*设置等待条水平居于窗口正中*/
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;

      /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
      bottom: 30px;
    } 
    </style>
    <div class="waterfllow-loading">
      <img class="loading-progress" src="busy.gif">
    </div>
  <script type="text/javascript">
  //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定,使用document方式不起作用
  $(window).on('scroll',function(){
    if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
      waterallowData();
    }
  });

  function waterallowData(){
    $('.waterfllow-loading').addClass('active');
    
    /*$.ajax({
      url:url,
      type:"post",
      data: params,
      success:function(data,textStatus,jQXHR){
        //添加数据
        ...

        //隐藏加载条
        $('.waterfllow-loading.active').removeClass('active');
      }
    });*/
  }

获取页面顶部被卷起来的高度函数

  //获取页面顶部被卷起来的高度
  function scrollTop(){
    return Math.max(
      //chrome
      document.body.scrollTop,
      //firefox/IE
      document.documentElement.scrollTop);
  }

  chrome浏览器和Firefox/IE对滚动条是属于body还是html理解不同导致处理不同。

获取页面文档的总高度

  //获取页面文档的总高度
  function documentHeight(){
    //现代浏览器(IE9+和其他浏览器)和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
  }

  这个算法和jQuery计算文档高度的方法一致。

获取页面浏览器视口的高度

  function windowHeight(){
    return (document.compatMode == "CSS1Compat")?
    document.documentElement.clientHeight:
    document.body.clientHeight;
  }

  这里需要说明的是document.compatMode这个东东。很陌生,一般情况貌似没有遇到过。

  document.compatMode有两个取值"BackCompat""CSS1Compat"。官方解释是BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。
  IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。
  举个例子说明两种模式之间的差别有多大。

  当document.compatMode等于"BackCompat"时,浏览器客户区宽度是document.body.clientWidth;

  当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。

  还有其他属性类似。这里不说了,但是我们可以预见两种模式导致IE渲染的基石都更改了,可想而知构建出来的建筑物差别当有多大。

  所以请为每一个页面声明Doctype不仅仅是一个好习惯,而且是一个必要的处理。Quirks Mode可以进垃圾堆了。

  好了下面附上完整的代码,有一个小例子(没有后台刷数据,只是显示等待条)

<!DOCTYPE html>
<html lang="ch-cn">
  <head>
  <meta charset="utf-8">
  <script type="text/javascript" src='jquery-1.9.1.js'></script>
    <style type="text/css">
    html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
      
      margin: 0;
      padding:0;
    }
    *{
      
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
      .waterfllow-loading{
      
      z-index: 2000;
      display:none;
    }
    .waterfllow-loading.active{
      
      display:block;
    }
    .waterfllow-loading img.loading-progress{
      
      position: fixed;
      /*设置等待条水平居于窗口正中*/
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;

      /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
      bottom: 30px;
    } 
    </style>
  </head>
  <body style="background:#ff0;height:1000px;">
    <div class="waterfllow-loading">
      <img class="loading-progress" src="busy.gif">
    </div>
  </body>
  <script type="text/javascript">

  //获取页面顶部被卷起来的高度
  function scrollTop(){
    return Math.max(
      //chrome
      document.body.scrollTop,
      //firefox/IE
      document.documentElement.scrollTop);
  }
  //获取页面文档的总高度
  function documentHeight(){
    //现代浏览器(IE9+和其他浏览器)和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
  }
  //获取页面浏览器视口的高度
  function windowHeight(){
    //document.compatMode有两个取值。BackCompat:标准兼容模式关闭。CSS1Compat:标准兼容模式开启。
    return (document.compatMode == "CSS1Compat")?
    document.documentElement.clientHeight:
    document.body.clientHeight;
  }
  </script>
  <script type="text/javascript">
  //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定,使用document方式不起作用
  $(window).on('scroll',function(){
    if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
      waterallowData();
    }
  });

  function waterallowData(){
    $('.waterfllow-loading').addClass('active');
    
    /*$.ajax({
      url:url,
      type:"post",
      data: params,
      success:function(data,textStatus,jQXHR){
        //添加数据
        ...

        //隐藏加载条
        $('.waterfllow-loading.active').removeClass('active');
      }
    });*/
  }
  </script>  
</html>
View Code

  里面的加载条图片为

  

 

  如果觉得本文不错,请点击右下方【推荐】!

转载于:https://www.cnblogs.com/chuaWeb/p/5057746.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ajb11683/article/details/102021351

智能推荐

Linux基础 ---------- dhcp服务和yum源_wangdassye的博客-程序员宅基地

目录一. dhcp服务-----客户端动态ip设置二. yum的简单使用1. 配置yum源2. 共享yum源配置一.dhcp服务-----客户端动态ip设置--&amp;gt; vim  /etc/hosts     172.25.254.250 content.example.com--&amp;gt; yum  install dhcp -y    //安装dhcp服务     ...

#1045 - Access denied for user 'root'@'localhost' (using password: NO)_CmderQ的博客-程序员宅基地

如上所示,当我们修改数据库的密码之后,再次进入phpmyadmin的时候,就会产生这种错误#1045 - Access denied for user 'root'@'localhost' (using password: NO) 。那这种错误产生的原因是什么呢?解释就是,密码修改后,新旧密码不一致产生的。改正过来其实也很简单,在phpmyadmin3.4.10.1文件夹下找到config.inc

RocketMQ与Kafka对比(18项差异)_大数据技术与应用实战的博客-程序员宅基地

转载 https://www.cnblogs.com/BYRans/p/6100653.htmlRocketMQ与Kafka对比(18项差异)RocketMQ与Kafka对比(18项差异)原文链接:https://github.com/alibaba/RocketMQ/blob/master/wiki/kafka_partitions_problem.md

[leetcode]592. Fraction Addition and Subtraction_xiaocong1990的博客-程序员宅基地

题目链接:https://leetcode.com/problems/fraction-addition-and-subtraction/#/descriptionGiven a string representing an expression of fraction addition and subtraction, you need to return the calculation r

玩转PathMeasure_Luckie stone的博客-程序员宅基地

实现效果:效果看完了,不会写的童鞋肯定已经懵逼了,会的童鞋可以出门左拐了,因为实现实在太简单。好了,在开始撸代码之前,我们先来学习一个类 PathMeasure。我们的光能使者阵就是是基于这个类的两个方法撸出来的。PathMeasure这个类的 class 注释就一个版权说明,酱紫~Public constructorsPathMeasure 创建一个空的 p...

Bootstrap FileInput插件的使用_Michael_Jier的博客-程序员宅基地

详细介绍(英语):http://plugins.krajee.com/file-preview-management-demo#preview-iconicBootstrap FileInput中文API整理:https://blog.csdn.net/u012526194/article/details/69937741java+springboot+bootstrap-file...

随便推点

linux脚本文件个数,Linux上面执行mysql脚本判断文件个数_勤劳的伐木使的博客-程序员宅基地

我们应该相信,无论多么复杂的高楼大厦都是由普普通通的方砖堆砌而成的,同样,无论所么复杂的软件工程都是由基本的程序语句所构成的,编程爱好者、程序员和分析员的区别只是在于,用同样的程序语句构建的程序的不同而已进源码在VB中,我们可以按以下步骤来创建此类窗口:1、设置窗口的BorderStyle=3;2、在Form_Load中加入:Me.Icon=LoadPicture("")-&gt;直接从Map中获...

C# Halcon联合编程,保存图片文件_weixin_30859423的博客-程序员宅基地

private void SavePic_Click(object sender, EventArgs e) { SaveFileDialog SveFilNew = new SaveFileDialog(); SveFilNew.Filter = "JPEG文件|*.jpg*|BMP文件|*.bmp*|TIFF文件|*...

解析json或者多层次json_奇大可的博客-程序员宅基地

首先需要用到【Newtonsoft.Json.dll】插件dll下载地址:https://download.csdn.net/download/abcd5711664321/11716319 //本地json string json = File.ReadAllText("/Users/lpp/Downloads/testJson.json", Encoding.UTF8);...

DecimalFormat 的使用_胡小牧的博客-程序员宅基地

DecimalFormat是NumberFormat的一个具体子类,用于格式化十进制数字 默认采用的是四舍五入模式,当然我们可以修改模式具体用法如下API 地址下面说2个0 和# double str =1.538; DecimalFormat decimalFormat = new DecimalFormat("0"); Log.e("-----decimalFormat", decimalFormat.format(str));/...

必看!java后端,亮剑诛仙(最全知识点)_15150229228苏州超博金属的博客-程序员宅基地

你可能有所感悟。零散的资料读了很多,但是很难有提升。到处是干货,但是并没什么用,简单来说就是缺乏系统化。另外,噪音太多,雷同的框架一大把,我不至于全都要去学了吧。这里,我大体根据基础、Java基础、Java进阶给分了下类,挑的也都是最常用最重要的工具。这篇文章耗费了我大量的精力,你要是觉得好,请不要吝啬你的赞。如果你认同,可以关注我的微信公众号xjjdog,里面讲的就是这些内容。我会尝试更加系统化。最新的内容会在github持续更新,添加新的精选相关文章。地址:https://github.

Andorid音视频 - OpenGL ES的实战项目InstagramXFilter_Poney.Ma的博客-程序员宅基地

PS之前我用过Instagram的拍照功能,对他的滤镜可是垂涎已久啊,所以这次根据网上的资料有了一个开源项目有兴趣的可以看看InstagramXFilterInstagramXFilter参考了MagicCamera 以及 GPUImage,目前有几十种滤镜可供选择读者可以下载Demo运行一下,看看是不是你想要的,InstagramXFilter 1.0.1项目准备如果读者也对开发一款这样的应用感兴趣的话,那么我前面几篇的博客也许对你有帮助详情请查看我的CSDN专栏OpenGL这些博客将.