JavaScript判断滚动条位置与兼容各浏览器实现方法

滚动条判断原理与基础代码

本文分享一种通过JavaScript判断页面滚动条是否已到达最底部或最顶部的实现方法，供开发者参考。

许多网站在滚动条到达指定位置时显示“返回顶部”按钮，否则自动隐藏。本文将介绍该效果的实现原理与具体代码。

当可视区域高度小于页面实际高度时，浏览器会出现滚动条。判断条件如下：

if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;

使用 document.documentElement 前，需在页面头部添加文档类型声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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 (){
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("没有到达底部");
 }
}

各浏览器属性差异详解

补充说明：

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、Firefox和Chrome的滚动效果。

希望本文所述内容对JavaScript程序设计有所帮助。