js判断滚动条是否已到页⾯最底部或顶部实例
本⽂实例讲述了js判断滚动条是否已到页⾯最底部或顶部的⽅法。分享给⼤家供⼤家参考。具体分析如下：
我们经常会看到很多的⽹站⼀个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就⾃动隐藏了，下⾯就来给⼤家介绍这种效果实现原理与⽅法。
当可视区域⼩于页⾯的实际⾼度时，判定为出现滚动条，即：
复制代码代码如下:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
要使⽤ document.documentElement ，必须在页⾯头部加⼊声明：
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其实，这段代码是不起作⽤的，因为他没考虑到⼀个问题，就是浏览器的边框，当我们在获取页⾯的offsetHeight⾼度时是包括了浏览器的边框的，浏览器的边框是2个像素，所以这时⽆论在任何情况下clientHeight 始终是⼩于offsetHeight的，这就使得即使没有滚动条它也为true，因此我们要修正这个错误，代码应该这样改，在offsetHeight上减去4个像素，即：
复制代码代码如下:
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执⾏相关脚本。
}
还有，这⾥要搞清楚，上⾯这代码是判断横向滚动条的，我们⼀般要判断的是纵向滚动，代码如下：
复制代码代码如下:
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){网站底部代码js特效
//执⾏相关脚本。
}
判断滚动条是否已拉到页⾯最底部，可以⽤如下代码
复制代码代码如下:
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已声明:
IEdocument.documentElement.scrollHeight  浏览器所有内容⾼度 ,document.body.scrollHeight  浏览器所有内容⾼度document.documentElement.scrollTop  浏览器滚动部分⾼度，document.body.scrollTop 始终为0
document.documentElement.clientHeight  浏览器可视部分⾼度，document.body.clientHeight  浏览器所有内容⾼度FFdocument.documentElement.scrollHeight  浏览器所有内容⾼度 ,document.body.scrollHeight  浏览器所有内容⾼度document.documentElement.scrollTop  浏览器滚动部分⾼度，document.body.scrollTop 始终为0
document.documentElement.clientHeight 浏览器可视部分⾼度，document.body.clientHeight  浏览器所有内容⾼度Chromedocument.documentElement.scrollHeight  浏览器所有内容⾼度， document.body.scrollHeight  浏览器所有内容⾼度document.documentElement.scrollTop 始终为0，document.body.scrollTop  浏览器滚动部分⾼度
document.documentElement.clientHeight  浏览器可视部分⾼度，document.body.clientHeight  浏览器所有内容⾼度
DTD未声明:
IEdocument.documentElement.scrollHeight  浏览器可视部分⾼度，document.body.scrollHeight  浏览器所有内容⾼度document.documentElement.scrollTop 始终为0，document.body.scrollTop  浏览器滚动部分⾼度
document.documentElement.clientHeight 始终为0，document.body.clientHeight  浏览器可视部分⾼度
FFdocument.documentElement.scrollHeight  浏览器可视部分⾼度, document.body.scrollHeight 浏览器所有内容⾼度
document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分⾼度
document.documentElement.clientHeight 浏览器所有内容⾼度，document.body.clientHeight 浏览器可视部分⾼度Chromedocument.documentElement.scrollHeight 浏览器可视部分⾼度,document.body.scrollHeight 浏览器所有内容⾼度document.documentElement.scrollTop 始终为0，document.body.scrollTop 浏览器滚动部分⾼度
document.documentElement.clientHeight 浏览器所有内容⾼度，document.body.clientHeight 浏览器
可视部分⾼度
浏览器所有内容⾼度即浏览器整个框架的⾼度，包括滚动条卷去部分+可视部分+底部隐藏部分的⾼度总和
浏览器滚动部分⾼度即滚动条卷去部分⾼度即可视顶端距离整个对象顶端的⾼度。
看懂了上⾯的参数我们就可以做出兼容ie,ff,chrome浏览器的滚动效果了。
希望本⽂所述对⼤家的javascript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。