码迷,mamicode.com
首页 > Web开发 > 详细

js取滚动条的尺寸实例代码

时间:2014-05-16 03:38:14      阅读:379      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   c   java   

分享一个js取滚动条的尺寸的函数代码,很简单,很实用。

创建一个嵌套节点,让外层节点产生滚动条,然后用offsetWidth - clientWidth即可获得滚动条宽度。

注意,为了避免页面抖动,可以设置外层元素position:absolute和visibility:hidden

完整代码:

bubuko.com,布布扣
function getScrollWith(){ 
var wrap = setAttributes(document.createElement(‘div‘),{ 
style : { 
width : ‘200px‘, 
height: ‘200px‘, 
overflow: ‘auto‘, 
position:‘absolute‘, 
visibility:‘hidden‘ 
} 
}) 
var inner = setAttributes(document.createElement(‘div‘),{ 
style : { 
width : ‘100px‘, 
height: ‘2000px‘ 
} 
}) 
document.body.appendChild(wrap); 
wrap.appendChild(inner); 
var w = wrap.offsetWidth - wrap.clientWidth; 
document.body.removeChild(wrap); 
wrap = null; 
inner = null; 
return w; 
} www.jbxue.com
function setAttributes(elem,opts){ 
for(var key in opts){ 
if(typeof opts[key] == ‘string‘){ 
elem[key] = opts[key]; 
}else{ 
if(!elem[key]){ 
elem[key] = {}; 
} 
setAttributes(elem[key],opts[key]); 
} 
} 
return elem; 
}
bubuko.com,布布扣

js取滚动条的尺寸实例代码,布布扣,bubuko.com

js取滚动条的尺寸实例代码

标签:style   blog   class   code   c   java   

原文地址:http://www.cnblogs.com/yes123/p/3729714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!