jQuery页面滚动底部加载数据
$(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页面滚动底部加载数据的更多相关文章
- Jquery页面滚动动态加载数据,页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- 页面滚动动态加载数据,页面下拉自动加载内容 jquery
<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...
- JQuery ajax 滚动底部加载更多
<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...
- Android中GridView滚动到底部加载数据终极版
之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...
- Ajax 滚动异步加载数据
第一种情况:单个div滚动 HTML <body> <!-- search start --> <div class="search" #if($m_ ...
- div滚动底部加载li,window滚动底部加载li
DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- [转]JavaScript实现 页面滚动图片加载
本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个 ...
- AppCan学习笔记----关闭页面listview动态加载数据
AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...
- 滚动加载|页面滑到底部加载数据|jquery.endless-scroll插件|使用demo
<html> <head> <link rel="dns-prefetch" href="http://i.tq121.com.cn&quo ...
随机推荐
- SqlExpress与 LocalDB的链接字符串转换
1.如果是连接SQL Server Express databases,需要将连接字符串定义为:Data Source=.SQLEXPRESS" to "Data Source=( ...
- ubuntu没有/usr/include/sys目录
实际上不是没有sys目录,只是系统给换路径了 32位系统:/usr/incude/i386-linux-gnu/sys 64位系统:/usr/include/x86_64-linux-gnu/sys/ ...
- Oracle SQL*Plus命令
登录数据库: 方式(1)当我们刚安装Oracle数据库时,登录账户时可以使用win+r 输入sqlplus,进入sqlplus命令窗口,然后输入用户名和密码,这里输入密码时不会有回显 方式(2)使用w ...
- vue安装教程总结
转载:https://blog.csdn.net/sunny1660/article/details/78326548 简介: vue.js是一套构建用户界面的渐进式框架.比较简洁,用于解 ...
- luogu P4774 [NOI2018]屠龙勇士
传送门 这题真的是送温暖啊qwq,而且最重要的是yyb巨佬在Day2前几天正好学了crt,还写了博客 然而我都没仔细看,结果我就同步赛打铁了QAQ 我们可以先根据题意,使用set维护,求出每次的攻击力 ...
- Java基础_0305:简单Java类
简单Java类 简单Java类是一种在实际开发之中使用最多的类的定义形式,在简单Java类中包含有类.对象.构造方法.private封装等核心概念的使用,而对于简单Java类首先给出如下的基本开发要求 ...
- 「SHOI2015」(LOJ2038)超能粒子炮・改
传送门:Here 一句话题意:给定$ t$次询问,每次读入$n,k,$求$ \sum_{i=0}^kC_n^k\ mod\ 2333$, 其中$ t \leq 100000$,$n,k \leq 10 ...
- 错误整理:No plugin found for prefix 'jetty' in the current project and in the plugin groups
在maven进行jetty的调试中出现错误: [ERROR] No plugin found for prefix 'jetty' in the current project and in the ...
- MySql cmd下的学习笔记 —— 有关子查询的操作(where型,from型,exists型子查询)
先找到goods表 查询goods_id最大的商品 where型的子查询 查询goods_id最大的商品(不能用排序) 把两步写成一步,就是子查询 from型子查询 查找出每种cat_id下goods ...
- linux中创建python的虚拟环境
1,何为虚拟环境 linux是支持多用户的系统,如果某一位用户不想使用公用环境,想指定特殊的python版本安装仅供个人使用的一些包,那么虚拟环境将满足他的要求 2,虚拟环境使用需要virtualen ...