做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享，这个是同时兼容ie和firefox的。
首先我们需要知道的两个定义是：
滚动条距离浏览器顶部的高度 = 窗口滚动条高度；
滚动条距离浏览器底部的高度 = 文档（页面）内容实际高度 - 滚动条距离浏览器顶部的高度 - 窗口可视范围的高度；
好了，明白了这个定义，那我们就来具体看看如何获取各种高度的方法，下面同时举了一个示例。
获取窗口可视范围的高度
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;}
获取窗口滚动条高度
functiongetScrollTop(){varscrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;}elseif(document.body){scrollTop=document.body.scrollTop;}returnscrollTop;}
获取文档内容实际高度
functiongetScrollHeight(){returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);}
下面是具体的示例代码，注意这里为了演示效果使用了固定悬浮框的效果，在ie下面固定悬浮效果与上面的代码有些冲突不起作用，这里不深究了，读者可以在firefox下面看效果，这个代码本身是没有问题的。
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>js获取滚动条距离浏览器顶部,底部的高度</title><scripttype="text/javascript"src="/ajax/libs/jquery/1.4.4/jquery.min.js"></script><scripttype="text/javascript">//取窗口可视范围的高度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;}//取窗口滚动条高度functiongetScrollTop(){varscrollTop=0;if(document.documentElement&&document.documentElement.scrollTop){scrollTop=document.documentElement.scrollTop;}elseif(document.body){scrollTop=document.body.scrollTop;}returnscrollTop;}//取文档内容实际高度functiongetScrollHeight(){returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);}window.onscroll=function(){varheight=getClientHeight();vartheight=getScrollTop();varrheight=getScrollHeight();varbheight=rheight-theight-height;document.getElementById('show').innerHTML='此时浏览器可见区域高度为：'+height+'<br/>此时文档内容实际高度为：'+rheight+'<br/>此时滚动条距离顶部的高度为：'+theight+'<br/>此时滚动条距离底部的高度为：'+bheight;}functionfixDiv(div_id,offsetTop){varoffsetTop=arguments[1]?arguments[1]:0;varObj=$('#'+div_id);varObjObjTop=Obj.offset().top;varisIE6=$.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><divstyle="height:500px;"></div><div>/sitejs-17231-1.html</div><divid="show"></div><divstyle="height:2000px;"></div></body></html>
源引：/sitejs-17250-1.html
![[js] 获取浏览器当前页面的滚动条高度的兼容写法](https://1500zi.500zi.com/uploadfile/img/14/889/c342499c1c193523796d0adb505cbdac.jpg)
