获取滚动条的尺寸-CSDN博客

本文介绍了一种通过创建嵌套节点来测量滚动条宽度的方法。具体步骤为：首先创建一个带有滚动条的外层div，并将一个高而窄的内层div置于其中，通过计算外层div的offsetWidth与clientWidth之差得出滚动条的宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个比较简单，做个记录而已。

创建一个嵌套节点，让外层节点产生滚动条，然后用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;
    }