浅析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 相关文章推荐
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery EasyUI中DataGird动态生成列的方法
Apr 05 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
简单实现js上传文件功能
Aug 21 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
Oct 19 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
Mar 10 Javascript
js实现模拟购物商城案例
May 18 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
PHP 高手之路(三)
2006/10/09 PHP
PHP入门
2006/10/09 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
mac下Apache + MySql + PHP搭建网站开发环境
2014/06/02 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
老生常谈PHP面向对象之命令模式(必看篇)
2017/05/24 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
python开发利器之ulipad的使用实践
2017/03/16 Python
python difflib模块示例讲解
2017/09/13 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
Tensorflow 实现释放内存
2020/02/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
银行实习鉴定
2013/12/13 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
婚礼父母致辞
2015/07/28 职场文书
大学生支教感言
2015/08/01 职场文书
任命书格式模板
2015/09/22 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
HttpClient实现文件上传功能
2022/08/14 Java/Android