各种滚动条的获取-阿里云开发者社区

各种滚动条的获取

2016-05-10 1547

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

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

(1)获取页面滚动条

   Js代码  
    
  
// Cross browser gets the position of scroll  
com.whuang.hsj.getScroll=function(){  
    return {  
        top:document.documentElement.scrollTop || document.body.scrollTop,  
        left:document.documentElement.scrollLeft || document.body.scrollLeft,  
        height:document.documentElement.scrollHeight ||document.body.scrollHeight  
    }  
}  

(2)获取iframe滚动条

   Js代码  
    
  
/*** 
* get iframe window'scroll 
*/  
com.whuang.hsj.getIframeScroll=function(iframeObj){  
    var document22=iframeObj.contentWindow.document;  
    return {  
        top:document22.documentElement.scrollTop || document22.body.scrollTop,  
        left:document22.documentElement.scrollLeft || document22.body.scrollLeft,  
        height:document22.documentElement.scrollHeight || document22.body.scrollHeight,  
        width:document22.documentElement.scrollWidth || document22.body.scrollWidth  
    }  
}  

(3)获取div滚动条

   Js代码  
    
  
/*** 
 * Get scroll of div 
 * @param divObj 
 * @returns {{scrollHeight: (*|number), scrollWidth: (*|number)}} 
 */  
com.whuang.hsj.getDivScroll=function(divObj){  
    if(typeof divObj == 'string'){  
        divObj=com.whuang.hsj.$$id(divObj);  
    }  
    return {  
        scrollHeight:divObj.scrollHeight,  
        scrollWidth:divObj.scrollWidth  
    }  
}  

(4)获取div的位置

   Js代码  
    
  
/*** 
 * Get the Coordinate/Location of div 
 * @param divObj 
 * @returns {{width: number, height: number, left: *, top: Window}} 
 */  
com.whuang.hsj.divCoordinate=function(divObj){  
    if(typeof divObj == 'string'){  
        divObj=com.whuang.hsj.$$id('divObj');  
    }  
    return {'width':divObj.offsetWidth,'height':divObj.offsetHeight,  
        'x':divObj.offsetLeft,'y':divObj.offsetTop,  
        'scrollLeft':com.whuang.hsj.getScroll().left,'scrollTop':com.whuang.hsj.getScroll().top};  
}  

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

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

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

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

   Js代码  
    
  
com.whuang.hsj.setTopScroll=function(top){  
    if(document.documentElement.scrollTop){  
        document.documentElement.scrollTop=top;  
    }else if(document.body.scrollTop){  
        document.body.scrollTop=top;  
    }  
};  

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

   Js代码  
    
  
com.whuang.hsj.setLeftScroll=function(left){  
    if(document.documentElement.scrollLeft){  
        document.documentElement.scrollLeft=left;  
    }else if(document.body.scrollLeft){  
        document.body.scrollLeft=left;  
    }  
};  

各种滚动条的获取

热门文章

最新文章

相关电子书