提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js判断滚动条是否已到页面最底部或顶部实例

JS实例 判断 页面 是否 滚动条 底部 顶部
2023-06-13 09:15:31 时间

本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下：

我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了，否则就自动隐藏了，下面就来给大家介绍这种效果实现原理与方法。

当可视区域小于页面的实际高度时，判定为出现滚动条，即：

复制代码代码如下:
if(document.documentElement.clientHeight<document.documentElement.offsetHeight)scroll=true;

要使用document.documentElement，必须在页面头部加入声明：
复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/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){
//执行相关脚本。
}

判断滚动条是否已拉到页面最底部，可以用如下代码

复制代码代码如下:window.onscroll=function(){
varmarginBot=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){
//dosomething
}
}

示例2

在网上找的。还挺兼容浏览器的。奇怪的是我在文档里面没找到相关信息。代码贴出来吧。

复制代码代码如下:/********************
*取窗口滚动条高度
******************/
functiongetScrollTop()
{
   varscrollTop=0;
   if(document.documentElement&&document.documentElement.scrollTop)
   {
       scrollTop=document.documentElement.scrollTop;
   }
   elseif(document.body)
   {
       scrollTop=document.body.scrollTop;
   }
   returnscrollTop;
}

/********************
*取窗口可视范围的高度
*******************/
functiongetClientHeight()
{
   varclientHeight=0;
   if(document.body.clientHeight&&document.documentElement.clientHeight)
   {
       varclientHeight=(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;       
   }
   else
   {
       varclientHeight=(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
   }
   returnclientHeight;
}
/********************
*取文档内容实际高度
*******************/
functiongetScrollHeight()
{
   returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
 functiontest(){
 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程序设计有所帮助。

相关文章