JavaScript 获取浏览器滚动条宽度的实用方法

JavaScript 获取浏览器滚动条宽度的实用方法

此方法实现简单，仅用于记录相关技术细节。

核心思路是创建一个嵌套的DOM节点，强制外层容器出现滚动条，随后通过计算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;
} 
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;
}