判断滚动条到底部的JS代码


Posted in Javascript onNovember 04, 2013

判断滚动条到底部,需要用到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){


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来实现的话就更简单了,
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();

var scrollHeight = $(document).height();

var windowHeight = $(this).height();

if(scrollTop + windowHeight == scrollHeight){


alert("you are in the bottom");

}
});

如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。
Javascript 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js函数排序的实例代码
Jul 01 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
Vue计算属性的使用
Aug 04 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 #Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 #Javascript
jquery监听div内容的变化具体实现思路
Nov 04 #Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 #Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 #Javascript
浅析return false的正确使用
Nov 04 #Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 #Javascript
You might like
php中随机显示图片的函数代码
2011/06/23 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python基础教程之利用期物处理并发
2018/03/29 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
python str字符串转uuid实例
2020/03/03 Python
Python reversed函数及使用方法解析
2020/03/17 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
Python实现疫情地图可视化
2021/02/05 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
市场部专员岗位职责
2013/11/30 职场文书
课程改革实施方案
2014/03/16 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
太行山上观后感
2015/06/05 职场文书