浅析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 相关文章推荐
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
Bootstrap Table使用心得总结
Nov 29 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 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 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
使用python开发vim插件及心得分享
2014/11/04 Python
Python中的默认参数详解
2015/06/24 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
教师推荐信范文
2013/11/24 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书