$(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. Android获取版本号

    public static String getVersionName(Context context) { PackageManager manager = context.getPackageMa ...

  2. Android设置shape后改变颜色

    如下,可能多个btn的设置同一个shape,如果单独改变btn颜色,可以用如下代码 GradientDrawable btnPreDrawable = (GradientDrawable) btnTe ...

  3. javascript文件加载模式与加载方法

    加载方式 形象图像化方法,见 http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 1. script标签, ...

  4. ****** 二十八 ******、软设笔记【数据库】-分布式数据库、特点、数据存储、DBMS组成

    分布式数据库    一.分布式数据库        分布式数据库由一组数据组成,这些数据物理上分布在计算机网络的不同结点(场地)上,逻辑上是属于同一个系统.每个结点可以执行局部应用,也能通过网络通信子 ...

  5. List、Map、set的加载因子,默认初始容量和扩容增量

    首先,这三个概念说下.初始大小,就是创建时可容纳的默认元素个数:加载因子,表示某个阀值,用0~1之间的小数来表示,当已有元素占比达到这个阀值后,底层将进行扩容操作:扩容方式,即指定每次扩容后的大小的规 ...

  6. [译]使用Command模式和MediatR简化你的控制器

    原文 你希望保持你的controller足够简单. 你的controller越来越臃肿,你听说command模式是一个给controller瘦身的解决方案. 但是你不知道command模式是否适合你的 ...

  7. loj 10181 绿色通道 二分答案+单调队列DP

    空题段长度即为单调队列长度区间 每次二分答案进行check即可 #include<bits/stdc++.h> using namespace std; ; const int inf=0 ...

  8. python-类型转化

    s='1234' a=int(s)     字符串转换成整数 s=str(a)    整数转换成字符串

  9. python学习-Day1-接口测试

    学习内容:接口测试 学习方式: 通过工具测试http接口 工具:postman + jmeter 基础知识 一. 接口调用测试:接口请求报文拼接 1. 问号前是url,后面是参数名和参数值,多个参数用 ...

  10. Protobuf学习

    https://www.jianshu.com/p/2265f56805fa https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.ht ...