第一种情况：单个div滚动

HTML

<body>

<!-- search start -->

<div class="search" #if($m_o_d_e == "nightmode") style="background: #2e2e2e;"  #end>

<a  onclick="firstSearch()"><b></b>搜索</a>

</div>

<a href="javascript:;" class="moveTop" id="movetop"></a>

<div class="domainBook">

    <div class="domainNav swiper-container">

       <ul class="swiper-wrapper">

       <li>左侧导航<li>

       li>左侧导航<li>

       li>左侧导航<li>

       </ul>

    </div>

    <div class="domainCon slideHeight">

    <!--滚动div-->

        <div class="groupM autoHeight">

           <ul id="subjectUl"></ul>

           <div class="pullUp" id="btu"></div>

        </div>

    </div>

</div>    

</body>

Javascript

$("document").ready(function(){

    //滚动监听事件

    $(".slideHeight").scroll(function(){

      var nScrollHight = $(this)[0].scrollHeight;

      var nScrollTop = $(this)[0].scrollTop;

      var nDivHight = $(".slideHeight").height();

    if(nScrollTop + nDivHight >= nScrollHight){

        $("#btu").html('<span class="pullUpIcon"></span>正在加载...');

        getMore(channelId);    //AJAX加载数据（到subjectUl）

    }

 });

第二种情况：整个页面滚动

HTML

<body>

<a href="javascript:;" class="moveTop" id="movetop"></a>

<!--滚动部分start-->

<div class="groupM slideHeight">

   <ul id="subjectUl"></ul>

   <div class="pullUp" id="btu"></div>

</div>

</body>

Javascript

$(function(){

    //滚动监听事件

    $(window).scroll(

           function () {

               /*当前滚动条到顶部的距离*/

               var top = $(document).scrollTop();

               /*当前浏览器的可视高度*/

               var height = document.body.clientHeight;

               /*当前网页（body）的高度*/

               var z_height = $(document).height();

               /*判断（网页的body高度减去当前浏览器的可视高度是否等于滚动条到顶部的距离）

                * 相等：则判定当前页面在底部

                * 不相等：判定当前页面不在底部

                * */

               var stats = ( z_height - height-top == 0) ;

               if (stats) {

                   /*当前网页在最底部，执行该函数*/

                   $("#btu").html('<span class="pullUpIcon"></span>正在加载...');

                   More();//AJXA异步加载数据（到subjectUl）

               }

           }

    );

})

Ajax 滚动异步加载数据的更多相关文章

  1. js滚动异步加载数据的思路

    <body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...

  2. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  5. Jquery zTree结合Asp.net实现异步加载数据

    zTree结合Asp.net实现异步加载数据 实现简单操作 zTree 下载 api 访问 :http://www.ztree.me/v3/main.php 例子中用到json数据转化 newtons ...

  6. 新手教程：不写JS，在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  7. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  8. highcharts.js两种数据绑定方式和异步加载数据的使用

    一,我们先来看看异步加载数据的写法(这是使用MVC的例子) 1>js写法 <script src="~/Scripts/jquery-2.1.4.min.js"> ...

  9. ajax按楼层加载数据

    代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <tit ...

随机推荐

  1. 将Python项目打包成EXE可执行文件（单文件，多文件，包含图片）

    解决 将Python项目打包成EXE可执行文件(单文件,多文件,包含图片) 1.当我们写了一个Python的项目时,特别是一个GUI项目,我们特备希望它能成为一个在Windows系统可执行的EXE文件 ...

  2. WebDriver高级应用实例（6）

    6.1精确比较网页截图图片 目的:对于核心界面进行截屏,并且使用测试过程中的截图和以前测试过程中的截图进行比较.确认页面是否发生了改变 被测网页的网址: http://www.baidu.com Ja ...

  3. Celery -- 分布式任务队列 及实例

    Celery 使用场景及实例 Celery介绍和基本使用 在项目中如何使用celery 启用多个workers Celery 定时任务 与django结合 通过django配置celery perio ...

  4. Scanner的概述与String类的构造和使用_DAY12

    1:Scanner的概述(理解) 1)Scanner是JDK5以后出现的方便我们从键盘接受数据的类. 2)Scanner的构造格式: Scanner sc = new Scanner(System.i ...

  5. fastjson的JSONArray转化为泛型列表

    背景:一个复杂结构体内部可能有array的数据,例如:{name:"test",cities:[{name:"shanghai",area:1,code:200 ...

  6. 使用控制台程序搭建OAuth授权服务器

    参考地址:ASP.NET Web Api: Understanding OWIN/Katana Authentication/Authorization Part I: Concepts 先上一张OA ...

  7. spring boot 与 thymeleaf (4): 基本对象、工具类对象

    如果在前台, 我需要获取session中的信息, 或者需要获取url中的参数信息, 是不是需要在后台手动处理好, 然后放到Model中去, 在前台通过${}来取呢? 当然, 这种方式, 是可以的, 但 ...

  8. mysql 导出 sql的执行结果到 csv文件

    需求: 1. 执行某 SQL 的结果: 2. 将结果导出到 csv文件: 3. 通过命令行执行: mysql ;" | sed 's/\t/","/g;s/^/" ...

  9. 【杂谈】对RMI（Remote Method Invoke）的认识

    前言 对RMI接触的也比较早,基本上刚学完Java基础不久就机缘巧合遇到了.当时有尝试着去了解,但是没看到比较好的教程,而且对网络编程相关知识不太了解,看了不少文章,也没弄明白.现在对网络和I/O有了 ...

  10. TCP连接的TIME_WAIT和CLOSE_WAIT 状态解说

    相信很多运维工程师遇到过这样一个情形: 用户反馈网站访问巨慢, 网络延迟等问题, 然后就迫切地登录服务器,终端输入命令"netstat -anp | grep TIME_WAIT | wc ...