jquery如何判断滚动条滚到页面底部并执行事件
首先理解三个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时,加载新内容
// 这里加载数据..
}
});
}
- 微信支付-Java-SpringMVC基础一些代码支持
- 使用Kafka的High Level Consumer
- 微信公众号发送模板消息 Java实现。
- [Intellij IDEA]File size exceeds configured limit
- 那些年Struts 1.X 而今我还是不会
- 关于MySQL DNS解析探究之一:DNS解析确实在起作用
- 每一个程序员需要了解的10个Linux命令
- 实战案例 | 使用机器学习和大数据预测心脏病
- 关于JVM直接内存触发Full GC
- 极客DIY:通过树莓派发送摩斯码
- Hadoop SequnceFile.Writer 压缩模式及压缩库浅析
- Thrift抛直接内存OOM一点解决思路
- 小顶堆Java实现
- Tomcat源码分析一:源码导入
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flutter实现顶部导航栏功能
- Flutter实现侧边栏功能
- 浅谈前后端分离
- ElementUI使用Cascader实现省市区三级联动
- Js给数组对象新增属性
- idea中使用逆向工程----三部曲
- 《JSON笔记之二》----封装JSONUtil
- Spring源码学习笔记(11)——Event体系
- Spring源码学习笔记(12)——IoC容器启动流程
- HashMap详解
- ElementUI使用autocomplete组件输入搜索
- Hacking with iOS: SwiftUI Edition - 愿望清单项目(三)
- 浏览器在线预览offce,vue-pdf预览pdf文件
- vivo商城前端架构升级-总览篇
- 《JSON笔记之三》---postman中传入json串