js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。
首先我们需要知道的两个定义是：
滚动条距离浏览器顶部的高度 = 窗口滚动条高度；
滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗口可视范围的高度；
好了，明白了这个定义，那我们就来具体看看如何获取各种高度的方法，下面同时举了一个示例。
获取窗口可视范围的高度
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 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 getScrollHeight(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
这里是示例代码效果图：
下面是具体的示例代码，注意这里为了演示效果使用了固定悬浮框的效果，在ie下面固定悬浮效果与上面的代码有些冲突不起作用，这里不深究了，读者可以在firefox下面看效果，这个代码本身是没有问题的。
<html xmlns="http://www.phpernote.com/javascript-function/754.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js获取滚动条距离浏览器顶部,底部的高度</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//取窗口可视范围的高度
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 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 getScrollHeight(){
return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
window.onscroll=function(){
var height=getClientHeight();
var theight=getScrollTop();
var rheight=getScrollHeight();
var bheight=rheight-theight-height;
document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br />此时文档内容实际高度为：'+rheight+'<br />此时滚动条距离顶部的高度为：'+theight+'<br />此时滚动条距离底部的高度为：'+bheight;
}
function fixDiv(div_id,offsetTop){
var offsetTop=arguments[1]?arguments[1]:0;
var Obj=$('#'+div_id);
var ObjTop=Obj.offset().top;
var isIE6=$.browser.msie && $.browser.version == '6.0';
if(isIE6){
$(window).scroll(function(){
if($(window).scrollTop()<=ObjTop){
Obj.css({
'position':'relative',
'top':0
});
}else{
Obj.css({
'position':'absolute',
'top':$(window).scrollTop()+offsetTop+'px',
'z-index':1
});
}
});
}else{
$(window).scroll(function(){
if($(window).scrollTop()<=ObjTop){
Obj.css({
'position':'relative',
'top':0
});
}else{
Obj.css({
'position':'fixed',
'top':0+offsetTop+'px',
'z-index':1
});
}
});
}
}
$(function(){fixDiv('show',5);});
</script>
</head>
<body>
<div style="height:500px;"></div>
<div>http://www.phpernote.com/jquery/251.html</div>
<div id="show"></div>
<div style="height:2000px;"></div>
</body>
</html>转载请注明出处：php程序员的笔记
最后修改时间：2013年07月14日 16时44分 文章来源：-わ千与千寻