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 ...
随机推荐
- SQL Server Management Studio 使用技巧
Ø 前言 本文主要介绍 SQL Server Management Studio 工具的使用,相信很多开发人员都比较熟悉此工具,特别是做 C# 开发的程序员,基本上都会经常使用该工具,当然也可以使用 ...
- 遍历页面上的checkbox
$("#Button1").click(function () { $("input[type='checkbox']").each(function () { ...
- C# FTPHelper工具类
/// <summary> /// Ftp /// </summary> public class FtpFileOperation { private string _ftp ...
- python判断小数示例&写入文件内容示例
#需求分析: #1.判断小数点个数是否为1 #2.按照小数点分隔,取到小数点左边和右边的值 #3.判断正小数,小数点左边为整数,小数点右边为整数 #4.判断负小数,小数点左边以负号开头,并且只有一个负 ...
- mybatis执行批量更新数据
1.业务需求:同时执行多记录批量操作 2.实现方法: 1)mapping: 2) dao 层 3)Service 层(注意要使用Transactional,否则可能会导致数据紊乱) 4)Con ...
- jmeter 压力测试(一)一个简单的登录
写在最前面,之所以记录这个最最简单的http的登录,是因为捣鼓了一天,真的是找错也找不错了,后来请教的同事,重新写了一个ok了,最后发现竟然是因为[http信息头]写的有问题,简直是!!醉了 如下,这 ...
- 【Git】Git常用命令
git remote -v : 查看远程仓库地址
- python(六)列表推导式、字典推导式、集合推导式
转载 https://www.cnblogs.com/tkqasn/p/5977653.html
- css3基础一
1,css简介 CSS 用于控制网页的样式和布局.样式定义如何显示html元素,样式通常保存在外部的 .css 文件中.通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面 ...
- openstack Q版部署-----Cinder云存储服务(10)
一.cinder介绍 一般 cinder-api 和 cinder-scheduler 安装在控制节点上, cinder-volume 安装在存储节点上. 二.数据库配置 # 在任意控制节点创建数据库 ...