浅析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 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
详解vue渲染函数render的使用
2017/12/12 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
ES6学习笔记之map、set与数组、对象的对比
2018/03/01 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
javascript的this关键字详解
2019/05/20 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
django站点管理详解
2017/12/12 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
深入理解Python 多线程
2020/06/16 Python
全球虚拟主机商:HostGator
2017/02/06 全球购物
PHP如何自定义函数
2016/09/16 面试题
颁奖典礼主持词
2014/03/25 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
团员自我评价范文
2015/03/10 职场文书