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 ...
随机推荐
- mosh
mosh 是一款使用 UDP 连接 C/S 的终端工具, 服务器只需安装好 mosh 套件, 并启动 SSH 服务, 等待 Client 连接即可. Client (mosh-client) 连接时, ...
- 一个CLR20r3 错误解决。
好久没写过winform程序了,用devexpress写了个小工具,连一个本地的数据库,感觉不会出什么异常,连接时就没加捕获,调通之后就没管,因为特殊需求,需要把程序放到腾讯云上运行,结果一运行就报错 ...
- 腾讯云cos封装
public class CosUtil { int _appId = xxxxx; string _secretId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ...
- 【python小练】图片爬虫之BeautifulSoup4
Python3用不了Scrapy! Python3用不了Scrapy! Python3用不了Scrapy! [重要的事情说三遍,据说大神们还在尝试把scrapy移植到python3,特么浪费我半个小时 ...
- Ubuntu18.04安装搜狗拼音输入法皮肤透明解决方法
解决方法: 去搜狗输入法官网下载一个新的皮肤,然后右键用“搜狗输入法”打开,就解决了!!!
- 【webpack】中clean-weabpack-plugin使用方法
在webpack中打包的文件通常是通过hash生成的,如果文件改动,那么打包的文件就会越来越多,如果想清除之前的文件,可以使用clean-weabpack-plugin插件来处理 注意版本号:我使 ...
- 《SSH网上商城》-视频目录--代码可以跑起来
本课程是2015年2月份的,就是14年底的. 课程第一天的代码-添加 jsp-api.jar servlet-api.jar就可以跑起来,环境 JDK1.7 和tomcat8, SSH网上商城\S ...
- Maven项目在更新过程停止,再更新无效-->解决
---类似网友问题:但我按照这样无法解决. eclipse中maven项目jar包不会自动下载解决办法 - wavemelody - 博客园http://www.cnblogs.com/mymelod ...
- ASP.NET MVC - 安全、身份认证、角色授权和ASP.NET Identity
ASP.NET MVC - 安全.身份认证.角色授权和ASP.NET Identity ASP.NET MVC内置的认证特性 AuthorizeAttribute特性(System.Web.Mvc)( ...
- 通过HTTP服务访问FTP服务器文件(配置nginx+ftp服务器)
1.前提 已安装配置好nginx+ftp服务 2.配置Nginx 服务器 2.1进入nginx 配置文件目录: cd /usr/local/nginx/conf vi nginx.conf 2.2 ...