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 相关文章推荐
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
javascript实现跳转菜单的具体方法
Jul 05 Javascript
js 获取元素所有兄弟节点的实现方法
Sep 06 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
基于canvasJS在PHP中制作动态图表
May 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
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php实现每日签到功能
2018/11/29 PHP
jquery事件与函数的使用介绍
2013/09/29 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
简单实现python进度条脚本
2017/12/18 Python
OpenCV 模板匹配
2019/07/10 Python
Python面向对象之Web静态服务器
2019/09/03 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Python进行统计建模
2020/08/10 Python
机械设计职业生涯规划书
2013/12/27 职场文书
心得体会怎么写
2013/12/30 职场文书
《我不是最弱小的》教学反思
2014/02/23 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
土地转让协议书
2014/04/15 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
优质护理服务心得体会
2016/01/22 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
5个实用的JavaScript新特性
2022/06/16 Javascript
利用Java连接Hadoop进行编程
2022/06/28 Java/Android