浅析jquery如何判断滚动条滚到页面底部并执行事件


Posted in Javascript onApril 29, 2016

本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件。首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。

首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。

clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。

scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。

举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。
这个区间是: [0, (offsetHeight - clientHeight)]
即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight ? clientHeight) 范围之内。

1、判断滚动条滚动到最底端: scrollTop == (offsetHeight ? clientHeight)
2、在滚动条距离底端50px以内: (offsetHeight ? clientHeight) ? scrollTop <= 50
3、在滚动条距离底端5%以内: scrollTop / (offsetHeight ? clientHeight) >= 0.95

如上。
如果要实现拉到底部自动加载内容。只要注册个滚动条事件:

scrollBottomTest =function(){
   $("#contain").scroll(function(){
     var $this =$(this),
     viewH =$(this).height(),//可见高度
     contentH =$(this).get(0).scrollHeight,//内容高度
     scrollTop =$(this).scrollTop();//滚动高度
    //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容
    if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容
    // 这里加载数据..
    }
   });
}

以上这篇浅析jquery如何判断滚动条滚到页面底部并执行事件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
javascript拖拽应用实例
Mar 25 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
Jul 04 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 #Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 #Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 #Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 #Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 #Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 #Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 #Javascript
You might like
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
Three.js基础学习教程
2017/11/16 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
用Nodejs实现在终端中炒股的实现
2020/10/18 NodeJs
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python中os和sys模块的区别与常用方法总结
2017/11/14 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
EJB的角色和三个对象
2015/12/31 面试题
幼儿园安全生产月活动总结
2014/07/05 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2014年教研工作总结
2014/12/06 职场文书
小学生表扬稿范文
2015/05/05 职场文书
撤诉申请怎么写
2015/05/19 职场文书
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python