js 滚动条滚动到底部触发事件
一、前言
在开发项目时,常常需要展示大量数据。如果全部显示出来,数据相对少时,看不出来什么不同,如果数据很多时,一次请求全部显示,这就相当可怕了。
面对这种问题,PC里使用了分页效果,将数据分成一页页,换页时请求当前页数据,
而屏幕较小的移动端,分页就不怎么好看了,常用的方法是滚动到底部时继续加载数据
滚动加载其实也是一种分页,只是不使用页码而已。
二、正文
(一)、滚动事件的效果和原理
效果: 滚动到当前页的底部时,会转圈圈缓冲加载下一页的数据,完成后滚动区域和内容增加,以此类推;
原理: 3个数据(滚动视窗高度,滚动内容总高度, 当前已滚距离),
1个临界(滚动内容总高度 = 当前已滚距离 + 滚动视窗高度)
1.获取滚动视窗高度:$(window).height();(如果滚动区域不是整个页面,使用$('slector').height())
2.获取滚动内容总高度:$(this).get(0).scrollHeight
3.当前已滚距离:$(this).scrollTop()
(二)、scroll滚动事件:$(selector).scroll(function() {})
function scrollFunc(){
$("#container").scroll(function(){
var $this =$(this),
viewH =$(this).height(),//可见高度
contentH =$(this).get(0).scrollHeight,//内容高度
scrollTop =$(this).scrollTop();//滚动高度
if(contentH = viewH + scrollTop) { //当滚动到底部时, }
if(contentH - viewH - scrollTop <= 100) { //当滚动到距离底部100px时, }
if(scrollTop/(contentH -viewH) >= 0.95){ //当滚动到距离底部5%时
// 这里加载数据..
}
});
}
三、结语
。。。
js 滚动条滚动到底部触发事件的更多相关文章
- js滚动条滚动到底部触发事件
$("#contain").scroll(function(){ var $this =$(this), viewH =$(this).height(),//可见高度 conten ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- JS实现滚动区域触底事件
效果 贴上效果展示: 实现思路 样式方面不多赘述,滚动区域是给固定高度,设置 overflow-y: auto 来实现. 接下来看看js方面的实现,其实也很简单,触发的条件是: 可视高度 + 滚动距离 ...
- HTML页面滑动到最底部触发事件
其实基本原理做一个判断,如果 页面总高度 = 视口高度 + 浏览器窗口上边界内容高度 ,那么就是把页面滑动到了最低部,然后执行一个事件. //要触发的事件(自己定义事件的内容) functio ...
- H5中滚动到底部的事件
问题:在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多. 解决方案:可以采用window的滚动事件进行处理 分析:如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个 ...
- js和jquery中的触发事件
改别人的坑,遇到jquery选择器和fireEvent混用,不认识fireEvent方法报错. js的方法不能使用jquery的选择器去调用. 1.fireEvent (IE上的js方法 ) 我们来看 ...
- Vue.js之下拉列表及选中触发事件
老早就听说了Vue.js是多么的简单.易学.好用等等,然而我只是粗略的看了下文档,简单的敲了几个例子,仅此而已. 最近由于项目的需要,系统的看了下文档,也学到了一些东西. 废话不多说,这里要说的是下拉 ...
- js中按下回车触发事件
方法一:document.onkeydown = function (e) { // 回车提交表单// 兼容FF和IE和Opera var theEvent = window.event || e; ...
- asp.net---jquery--ajax 实现滚动条滚动到底部分页显示
前台:aspx页面 var bgtime = $(" #date1 ").val(); var overtime = $(" #date2 ").val(); ...
随机推荐
- 理解 python 装饰器
变量 name = 'world' x = 3 变量是代表某个值的名字 函数 def hello(name): return 'hello' + name hello('word) hello wor ...
- java创建类的5种方式
1.使用new关键字 } → 调用了构造函数 这种方式,我们可以调用任意的构造函数(无参的和带参数的). 2.使用Class类的newInstance方法 } → 调用了构造函数 使用Class类的n ...
- azure 最佳实践 -- 保持冗余
保持冗余确保你的应用的部署体系是有冗余的,以避免单一节点失败的情况.一个弹性良好的系统可以灵活的绕过系统故障.找出应用中(请求执行)的关键路径.路径中的每个节点是否都有冗余?子系统失败时,系统能否有效 ...
- Winform开发之ADO.NET对象Connection、Command、DataReader、DataAdapter、DataSet和DataTable简介
ADO.NET技术主要包括Connection.Command.DataReader.DataAdapter.DataSet和DataTable等6个对象,下面对这6个对象进行简单的介绍:(1)Con ...
- MySQL-with rollup函数运用
如果想在下面这个表下面添加一行 总计 数据行SQL代码怎么实现 并且根据9月金额进行城市降序 总计置于底部呢 MySQL提供了 group by with rollup 函数进行group by 字段 ...
- [Qt] QLineEdit 仿QQ签名框
今天鼓捣了半天,终于实现了自定义Qt中的QlineEdit控件的大致效果. 这个问题对于新手而言,主要有以下几个难点: 1.继承QLineEdit控件 2.QSS设置QLineEdit的相关样式,可以 ...
- Web自动化测试框架Watir(基于Ruby) - 第1章 Windows下安装与部署
一.前言 Web自动化测试一直是一个比较迫切的问题,对于现在web开发的敏捷开发,却没有相对应的敏捷测试,故开此主题,一边研究,一边将Web自动化测试应用于工作中,进而形成能够独立成章的博文,希望能够 ...
- VS2013编译64位OpenSSL(附32位)
安装ActivePerl 这个没什么好说的,直接运行msi即可. 编译OpenSSL 1.使用Visual Studio Tool中的“VS2013 x64 本机工具命令提示”来打开控制台:也可以打开 ...
- C# 与 Oracle 中 BINARY_DOUBLE数据类型查询
Oracle 10g新增 BINARY_DOUBLE 数据类型,而.NET暂不支持这个类型,查询时需要转换为 NUMBER. eg: "SELECT RAWTOHEX(OID) AS OID ...
- redis事务,分布式锁
事务:一组命令集合 主要命令multi 和exec multi set a 1 sadd s1 a ...... exec 错误处理 (1)语法错误 127.0.0.1:6379> multi ...