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

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

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

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

完整代码:

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; 

}

你可能感兴趣的:(滚动条)