各种滚动条的获取

使用JavaScript如何获取页面滚动条呢?

(1)获取页面滚动条

Js代码  

1. // Cross browser gets the position of scroll  
2. com.whuang.hsj.getScroll=function(){  
3.     return {  
4.         top:document.documentElement.scrollTop || document.body.scrollTop,  
5.         left:document.documentElement.scrollLeft || document.body.scrollLeft,  
6.         height:document.documentElement.scrollHeight ||document.body.scrollHeight  
7.     }  
8. }  

 

(2)获取iframe滚动条

Js代码  

1. /*** 
2. * get iframe window'scroll 
3. */  
4. com.whuang.hsj.getIframeScroll=function(iframeObj){  
5.     var document22=iframeObj.contentWindow.document;  
6.     return {  
7.         top:document22.documentElement.scrollTop || document22.body.scrollTop,  
8.         left:document22.documentElement.scrollLeft || document22.body.scrollLeft,  
9.         height:document22.documentElement.scrollHeight || document22.body.scrollHeight,  
10.         width:document22.documentElement.scrollWidth || document22.body.scrollWidth  
11.     }  
12. }  

 

(3)获取div滚动条

Js代码  

1. /*** 
2.  * Get scroll of div 
3.  * @param divObj 
4.  * @returns {{scrollHeight: (*|number), scrollWidth: (*|number)}} 
5.  */  
6. com.whuang.hsj.getDivScroll=function(divObj){  
7.     if(typeof divObj == 'string'){  
8.         divObj=com.whuang.hsj.$$id(divObj);  
9.     }  
10.     return {  
11.         scrollHeight:divObj.scrollHeight,  
12.         scrollWidth:divObj.scrollWidth  
13.     }  
14. }  

 

(4)获取div的位置

Js代码  

1. /*** 
2.  * Get the Coordinate/Location of div 
3.  * @param divObj 
4.  * @returns {{width: number, height: number, left: *, top: Window}} 
5.  */  
6. com.whuang.hsj.divCoordinate=function(divObj){  
7.     if(typeof divObj == 'string'){  
8.         divObj=com.whuang.hsj.$$id('divObj');  
9.     }  
10.     return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,  
11.         'x':divObj.offsetLeft,'y':divObj.offsetTop,  
12.         'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};  
13. }  

 

参考:利用函数的惰性载入提高javascript代码性能

http://blogread.cn/it/article/7304?f=hot1

 -------------- 2016年3月7日更新 --------------

跨浏览器设置滚动条的竖直位置

Js代码  

1. com.whuang.hsj.setTopScroll=function(top){  
2.     if(document.documentElement.scrollTop){  
3.         document.documentElement.scrollTop=top;  
4.     }else if(document.body.scrollTop){  
5.         document.body.scrollTop=top;  
6.     }  
7. };  

 

跨浏览器设置滚动条的水平位置

Js代码  

1. com.whuang.hsj.setLeftScroll=function(left){  
2.     if(document.documentElement.scrollLeft){  
3.         document.documentElement.scrollLeft=left;  
4.     }else if(document.body.scrollLeft){  
5.         document.body.scrollLeft=left;  
6.     }  
7. };