首页 > 建站教程 > JS、jQ、TS >  js获取滚动条的宽度正文

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上,这将不起作用。