$(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
          //shlar page = Number($("#redgiftNextPage").attr('currentpage')) + 1;
          //redgiftList(page);
         //$("#redgiftNextPage").attr('currentpage', page + 1);

    console.log("到底了,发起请求")
  }
});

解析:
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。

原页面地址:https://www.cnblogs.com/chen-lhx/p/5121360.html

jQuery页面滚动底部加载数据的更多相关文章

  1. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  2. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  3. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  4. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  5. Ajax 滚动异步加载数据

    第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...

  6. div滚动底部加载li,window滚动底部加载li

    DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. [转]JavaScript实现 页面滚动图片加载

    本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...

  8. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  9. 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo

    <html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...

随机推荐

  1. spring注解第02课 包扫描@ComponentScan、@ComponentScans

    1.配置文件形式: <context:component-scan base-package="com.atguigu" /> spring会扫描此包下的@Servic ...

  2. 三十七、Linux 线程——线程清理和控制函数、进程和线程启动方式比较、线程的状态转换

    37.1 线程清理和控制函数 #include <pthread.h> void pthread_cleanup_push(void (* rtn)(void *), void *arg) ...

  3. Tomcat连接池配置与实现/JNDI

    方法一: 在Tomcat的conf/context.xml中配置在Tomcat\apache-tomcat-6.0.33\conf目录下的context.xml文件中配置默认值如下: <?xml ...

  4. 【poj1741】Tree 树的点分治

    题目描述 Give a tree with n vertices,each edge has a length(positive integer less than 1001). Define dis ...

  5. [C++]头文件<algorithm>

    本博文仅示例一些常用的函数: sort.for_each. 1. sort /* STL - <algorithm> - sort template< class RandomIt, ...

  6. 移动端300ms延迟解决方法在vue 里面的一些小坑

    话不多说上图: 至于import为什么会报错,瞅下面这个图: 总结:要搞懂个必须了解下es6的解构赋值才能在这方面装逼,网上资料一大堆自行百度.

  7. 常用的Markdown语法

    1.表格 | 左对齐标题 | 右对齐标题 | 居中对齐标题 | | :------| ------: | :------: | | 短文本 | 中等文本 | 稍微长一点的文本 | | 稍微长一点的文本 ...

  8. 【提取元素的值 】【追加文本append】【删除文本remove】【class的操作】【读取元素的宽度,高度】

    1.取值 $("#test").text()                                    //取id=test里面的文字 $("#test&qu ...

  9. 调试 - Visual Studio调试

    Visual Studio - 调试 异常处理机制 windows预定义了一系列的异常错误码,每种程序异常都有一个对应的错误码,windows系统将这些类似键值对关系的数据存储在异常处理表中(称为SE ...

  10. bash常用指令(未完)

    #号注释1.man 2.cd 3.clear 4.alias 命令别名设置 区别命令别名和变量的区别,别名可以直接执行,本质是一个函数的索引 5.grep 查找字符串 grep [-acinv] [- ...