判断滚动条到底部的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 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
js实现手表表盘时钟与圆周运动
Sep 18 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去除换行(回车换行)的三种方法
2014/03/26 PHP
php过滤HTML标签、属性等正则表达式汇总
2014/09/22 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript函数中的arguments参数
2010/08/01 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
简单学习Python多进程Multiprocessing
2017/08/29 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
PyCharm代码格式调整方法
2018/05/23 Python
简单谈谈python基本数据类型
2018/09/26 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
python爬取微博评论的实例讲解
2021/01/15 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
采购员岗位职责
2013/11/15 职场文书
服装设计专业求职信
2014/06/16 职场文书
银行贷款收入证明
2014/10/17 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
小学班主任个人总结
2015/03/03 职场文书
清洁工个人工作总结
2015/03/05 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Python OpenGL基本配置方式
2022/05/20 Python