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 ...
随机推荐
- JS创建对象之稳妥构造函数模式
所谓稳妥对象,指的是没有公共属性,而且其方法也不引用this的对象 function Person(name, age, job) { // 创建要返回的对象 var o = new Object() ...
- 三十八、Linux 线程——线程属性初始化、销毁、设置和获得分离属性
38.1 线程属性初始化和销毁 #include <pthread.h> int pthread_attr_init(pthread_attr_t *attr); int pthread_ ...
- artTemplate/template.js模板将时间戳格式化为正常的日期
1:引用<script type="text/javascript" src="../js/artTemplate/template.js">< ...
- java调试与排错
参考网址:http://www.doc88.com/p-461115156632.html 一.Java程序调试与错误收集 1.Web程序的调试与排错:尽量使用System.out.println() ...
- 运行APP显示两个APP图标,一个打不开,删除一个后,另一个也会消失。
可能原因:你添加了两个intent-filter 的LAUNCHER 事件,这种情况尤其在一个项目多个module的时候容易出现 <intent-filter> ...
- Codeforces Round #545 (Div. 2)(D. Camp Schedule)
题目链接:http://codeforces.com/contest/1138/problem/D 题目大意:给你两个字符串s1和s2(只包含0和1),对于s1中,你可以调换任意两个字符的位置.问你最 ...
- mysql 查询优化 ~ 多表查询改写思路
一 简介:在之前我们从基础可知,现在咱们聊一下改写的几种思路二 分类: 1 left join 2 inner join 3 right join三 具体改写思路:思路1 本身不包含子查询,将多 ...
- mysql 架构 ~ MGR 与PXC的对比
一 简介 MGR和PXC的对比 二 WriteSet1 定义 是组件对于写节点应用事务生成binlog的再封装,用来验证其他节点的事务冲突 PXC构成key db_table_组件值data bin ...
- 关于xss攻击学习的总结
关于xss攻击,网上相关的介绍很多,一搜索也是一大堆,这里我就对自己感兴趣的一些内容做个总结. xss简单介绍 成因:xss是将恶意代码(多是JavaScript)插入html代码中. 分类: 1. ...
- Javascript - ExtJs - 事件
事件(ExtJs Event) Ext.Util.observable类 Ext.Util.observable是一个接口,为Ext组件的事件提供了支持,组件的事件不同于传统事件,所以需要有这么一套 ...