做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下面看效果，这个代码本身是没有问题的。
<htmlxmlns="/javascript-function/754.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.οnscrοll=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); varObjTop=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>/jquery/251.html</div> <divid="show"></div> <divstyle="height:2000px;"></div> </body> </html>
