JS实现判断滚动条滚到页面底部并执行事件的方法


Posted in Javascript onDecember 18, 2014

需要了解三个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时,加载新内容

        // 这里加载数据..

        }

     });

}

PS:这里再为大家推荐一款关于JS事件的在线查询工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

Javascript 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
13个PHP函数超实用
Oct 21 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 #Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 #Javascript
JavaScript获取Url里的参数
Dec 18 #Javascript
Javascript实现单张图片浏览
Dec 18 #Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 #Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 #Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 #Javascript
You might like
一个数据采集类
2007/02/14 PHP
PHP伪静态写法附代码
2008/06/20 PHP
关于PHP的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
基于JavaScript实现下拉列表左右移动代码
2017/02/07 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
python调用cmd复制文件代码分享
2013/12/27 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
实习教师自我鉴定
2013/12/09 职场文书
小学生自我评价范文
2014/01/25 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
工作收入证明模板
2015/06/12 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
Python基础之pandas数据合并
2021/04/27 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技