js获取滚动条的宽度

我爱模板网在做项目时，需要获取滚动条的宽度，但是，查遍了资料，也没发现好的方法。查到的都是获取滚动的距离。滚动条宽度在不同浏览器下还不一样，如果写死，还有偏差，如下：


正在纠结之际，发现了下面的变通方法，通过外层容器，减去内层容器，就能得到滚动条的宽度，而且兼容大部分浏览器，真是绝了！在这里记录下：

function getScrollbarWidth() {
    // 创建外层div，让它始终显示滚动条
    const outer = document.createElement('div');
    outer.style.visibility = 'hidden';
    // 强制显示滚动条
    outer.style.overflow = 'scroll';
    // needed for WinJS apps
    outer.style.msOverflowStyle = 'scrollbar';
    document.body.appendChild(outer);
    // 创建内层div
    const inner = document.createElement('div');
    outer.appendChild(inner);
    // 外层div减去内层div，得到的就是滚动条的宽度（横向就是高度）
    const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
    // 移除div
    outer.parentNode.removeChild(outer);
    return scrollbarWidth;
}

注意：
    1、如果在Windows（metro）应用程序上使用此功能，请确保将“外部” div 的-ms-overflow-style属性设置为scrollbar，否则将无法正确检测到宽度。（代码已更新）
    2、在默认设置为“仅在滚动时显示滚动条”（Yosemite及更高版本）的Mac OS上，这将不起作用。