js判断滚动条是否已到页面最底部或顶部实例
本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下：
我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。
当可视区域小于页面的实际高度时，判定为出现滚动条，即：
要使用 document.documentElement ，必须在页面头部加入声明：
其实，这段代码是不起作用的，因为他没考虑到一个问题，就是浏览器的边框，当我们在获取页面的offsetHeight高度时是包括了浏览器的边框的，浏览器的边框是2个像素，所以这时无论在任何情况下clientHeight 始终是小于offsetHeight的，这就使得即使没有滚动条它也为true,因此我们要修正这个错误，代码应该这样改，在offsetHeight上减去4个像素，即：
//执行相关脚本。
}
还有，这里要搞清楚，上面这代码是判断横向滚动条的，我们一般要判断的是纵向滚动，代码如下：
//执行相关脚本。
}
判断滚动条是否已拉到页面最底部，可以用如下代码
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
示例2
在网上找的。还挺兼容浏览器的。奇怪的是我在文档里面没找到相关信息。代码贴出来吧。
* 取窗口滚动条高度
******************/
function getScrollTop()
{
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
var clientHeight=0;
if(document.body.clientHeight&&document.documentElement.clientHeight)
{
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
else
{
var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;
}
return clientHeight;
}
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
function test(){
if (getScrollTop()+getClientHeight()==getScrollHeight()){
alert("到达底部");
}else{
alert("没有到达底部");
}
}
补充：
DTD已声明:
IE
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
FF
document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 浏览器滚动部分高度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
Chrome
document.documentElement.scrollHeight 浏览器所有内容高度， document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器可视部分高度，document.body.clientHeight 浏览器所有内容高度
DTD未声明:
IE
document.documentElement.scrollHeight 浏览器可视部分高度，document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 始终为0，document.body.clientHeight 浏览器可视部分高度
FF
document.documentElement.scrollHeight 浏览器可视部分高度, document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度
Chrome
document.documentElement.scrollHeight 浏览器可视部分高度,document.body.scrollHeight 浏览器所有内容高度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分高度
document.documentElement.clientHeight 浏览器所有内容高度，document.body.clientHeight 浏览器可视部分高度
浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。
看懂了上面的参数我们就可以做出兼容ie,ff,chrome浏览器的滚动效果了。
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
其实为js文件传参是很久就接触过的一个问题，只是一直没有放在心上，今天在无忧看到又有人问这个问题，今日总结一下。2010-05-05
cookie的大小是受限制的，并且每次请求cookie都会被发送，浪费宽带，cookie还需要指定作用域，不可以跨域调用。cookie的作用是与服务器进行交互，作为http规范的一部分存在，而webstorage仅仅是为了本地“存储”数据而生。2023-07-07
这篇文章主要介绍了JavaScript中数据结构与算法(三)：链表,本文分别讲解了单链表与双链表以及增加节和删除节的代码实例,需要的朋友可以参考下2015-06-06
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
这篇文章主要介绍了JS一分钟在github+Jekyll的博客中添加访问量功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
本篇文章是对在JS中Map和List的简单实现代码进行了详细的分析介绍，需要的朋友参考下2013-07-07
今天在为网站增加一些代码功能的时候，需要用到if条件判断，发现简写方法忘了，这里特整理下2014-05-05
这篇文章主要为大家详细介绍了H5+css3+js搭建带验证码的登录页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要介绍了JS封装cookie操作函数,以实例形式分析了JavaScript实现针对cookie的设置、获取及删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
无刷新上传解析csv文件的实现代码，需要的朋友可以参考下。2010-05-05
这篇文章主要介绍了BootStrap selectpicker 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论