获取浏览器滚动条的宽度

2017年05月21日Web前端0

我们有时需要考虑竖直滚动条对布局的影响，所以我们需要能够计算出滚动条的宽度。

一、滚动条的宽度

整个HTML生成的最外层的滚动条，我们是无法获取到的，因此我们只能自己创建一个新的滚动条，来计算他的宽度。

function getScrollWidth() {
    var noScroll,
        scroll,
        oDiv = document.createElement("DIV");
    oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
    oDiv.style.overflowY = "scroll";
    noScroll = document.body.appendChild(oDiv).clientWidth;
    scroll = oDiv.clientWidth;
    document.body.removeChild(oDiv);

    return noScroll - scroll;
}

我们新建一个div，并设置出滚动条，通过相减获取得到滚动条的宽度，最后移除该滚动条。