以下HTML将在div.container的右侧边缘显示滚动条。
是否可以确定该滚动条的宽度?
<div class="container" style="overflow-y:auto; height:40px;"> <div class="somethingBig"></div> </div>
此功能应为您提供滚动条的宽度
function getScrollbarWidth() { // Creating invisible container const outer = document.createElement('div'); outer.style.visibility = 'hidden'; outer.style.overflow = 'scroll'; // forcing scrollbar to appear outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps document.body.appendChild(outer); // Creating inner element and placing it in the container const inner = document.createElement('div'); outer.appendChild(inner); // Calculating difference between container's full width and the child width const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth); // Removing temporary elements from the DOM outer.parentNode.removeChild(outer); return scrollbarWidth; }
基本步骤如下:
更新资料
如果在Windows(metro)应用程序上使用此功能,请确保将“外部” div 的-ms-overflow- style属性设置为scrollbar,否则将无法正确检测到宽度。(代码已更新)
scrollbar
更新#2 在默认设置为“仅在滚动时显示滚动条”(Yosemite及更高版本)的Mac OS上,这将不起作用。