正在纠结之际,发现了下面的变通方法,通过外层容器,减去内层容器,就能得到滚动条的宽度,而且兼容大部分浏览器,真是绝了!在这里记录下:
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上,这将不起作用。