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 ...
随机推荐
- ssh免密登录及去掉提示
A连B 1.生成公钥和私钥 ssh-keygen2.复制公钥到需要免密登录的服务器上 ssh-copy-id root@192.168.25.175 A连A 2.复制公钥到本机上 ssh-c ...
- 第27月第27天 https
1.验证签名 { [self generateRSAKeyPair:kRSA_KEY_SIZE]; NSData *ttDt = [" dataUsingEncoding:NSASCIISt ...
- webpack指定第三方模块的查找路径
通常我们会使用一些地方模块在我们的项目中,比如bootstrap import 'bootstrap' 导入的bootstrap默认会查找当前目录的node_modules文件,但是如果这个文件没有, ...
- git详细介绍
Git管理我们的代码会经历三个不过程 1. 工作区:没有提交的代码就是存放的工作区 2. 暂存区:通过 git add 文件名 命令提交代码该文件就放在暂存区 3. 历史区:通过 git commit ...
- java解压缩zip
依赖的包: <!-- https://mvnrepository.com/artifact/org.apache.ant/ant --> <dependency> <gr ...
- pwnable.kr fb
fb-1 pt 连接到服务器,发现 有三个文件,fd脚本,fd.c脚本的源程序,flag是要看的东西,无权限 来我们分析一下源码 如果只传进去一个值,print” pass argv[1] a num ...
- pip问题
“ModuleNotFoundError: No module named 'pip'”的解决方法:http://www.pianshen.com/article/476461202/ pip错误 I ...
- SpringBoot--配置详解
SpringBoot使用了一个全局的配置文件application.properties,放在src/mian/resource目录下或者类路径的/config下.springboot的全局配置文件的 ...
- python初级实战-----主机在线情况监控web
背景 公司有600多台服务器,打算写一个小程序,能一眼看见哪些服务器不在线. 大体思路是: 1.把所有服务器ip存进数据库,ping命令判断服务器是否在线 2.更新数据库中ip的状态 3.简单的web ...
- android 组建添加透明度
给TextView添加透明度,起初用的方法是android:alpha = "0.3" 添加后,文字显示也有点透明发虚,后来改成设置background,然后 backgroun ...