浅析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数据显示插件整合实现代码
Oct 24 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
javascript的理解及经典案例分析
May 20 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
vue写一个组件
Apr 09 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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获取提交内容的实现方法
2016/05/25 PHP
zend framework重定向方法小结
2016/05/28 PHP
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
Vue3.0中的monorepo管理模式的实现
2019/10/14 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Python3基础之输入和输出实例分析
2014/08/18 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
python简单实现计算过期时间的方法
2015/06/09 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
如何在Django中添加没有微秒的 DateTimeField 属性详解
2019/01/30 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
护士求职信范文
2014/05/24 职场文书
课外活动总结
2015/02/04 职场文书
党校毕业个人总结
2015/02/28 职场文书
党支部综合考察意见
2015/06/01 职场文书
预备党员转正意见
2015/06/01 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python