各种滚动条的获取

  1. 云栖社区>
  2. 博客>
  3. 正文

各种滚动条的获取

黄威的世界 2016-05-10 15:24:59 浏览789
展开阅读全文

使用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. };  

网友评论

登录后评论
0/500
评论
黄威的世界
+ 关注