判断滚动条到底部的JS代码
判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。
废话不多少说,赶紧上代码(兼容不同的浏览器)。
//滚动条在Y轴上的滚动距离
function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){ // www.jbxue.com
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
}
//文档的总高度
function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
}
//浏览器视口的高度
function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
alert("you are in the bottom!");
}
};
如果用jquery来实现的话就更简单了,
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
alert("you are in the bottom"); // www.jbxue.com
}
});
如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。
转载于:https://www.cnblogs.com/linuxnotes/p/3407828.html
判断滚动条到底部的JS代码相关推荐
- JS判断滚动条到底部
form:http://www.uphtm.com/js/269.html判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. sc ...
- js判断PC端或是移动端、判断是不是微信浏览器、js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
** js判断PC端或是移动端 ** 第一种 window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator ...
- 在vue中如何判断滚动条到达底部
mounted(){//在生命周期函数mounted中console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素,this.$refs.ver ...
- JS如何判断滚动条是否滚到底部
JS如何判断滚动条是否滚到底部 背景 解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景 通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如"加载更多"等. 那么如何通过 ...
- Python+Selenium UI自动化 - 调用JS代码
当webdriver遇到无法完成的操作时候,这个时候可以使用javascript来完成,webdriver提供了execute_script()接口来调用js代码. 执行js有两种场景: 1.在页面上 ...
- js实现判断滚动条滚到页面底部并执行事件的方法
这里我主要介绍JS实现判断滚动条滚到页面底部并执行事件的方法: 需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个 ...
- jquery判断div滚动条到底部
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜 ...
- HTML判断客户端,JS代码判断客户端是手机访问还是PC电脑访问
这篇文章主要为大家详细介绍了JS代码判断客户端是手机访问还是PC电脑访问,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴. 前面给大家讲了<PHP判断判访问设 ...
- 判断是否移动端设备的JS代码,超短,百度都用它
为什么80%的码农都做不了架构师?>>> 大多数人都使用跳转适配的方式实现PC端到移动端的网页转换,而大多数人又是使用通过判断UA的方法来区分PC端还是移动端,思路一样,但代码 ...
- firefox 复制文本js代码。判断窗口是关闭还是刷新
判断窗口是关闭还是刷新 <script> function window.onbeforeunload(){ with(window.event)if(clientY<0&am ...
最新文章
- Nature子刊评论:2020年后,微生物组将如何发展?
- 饿了么四年、阿里两年:研发路上的一些总结与思考
- python 中 sorted() 和 list.sort() 的用法
- 每次输出日志前需要判断日志的级别吗?
- android源码编译 简书,android学习笔记之源码编译
- Spring Cloud Netflix Eureka 配置参数说明
- rar 文件头crc版本_php实现rar文件的读取和解压
- linux空指针异常能捕获到吗,一次kernel panic分析--空指针in handle_IRQ_event
- mybatis应用(二)注解的实现
- 基础拾遗------泛型详解
- oracle 次月,Oracle日期查询:季度、月份、星期等时间信息
- python的计算_python 计算方位角实例(根据两点的坐标计算)
- oracle行列互换sql,解决Oracle行列转换问题的一个方法
- 程序员的传奇“破圈”之路
- C语言中写一个函数返回参数二进制中 1 的个数
- The Past Mistake is the Future Wisdom: Error-driven ContrastiveProbability Optimization for Chinese
- 构建可扩展的思科互联网络---多区域OSPF
- VMware16的下载安装及搭建Linux环境
- linux 图片转视频教程,如何在Ubuntu上转换图像、音频和视频格式
- flash电脑安装包_电脑上如何播放swf文件