diff --git a/scrollbarWidth.js b/scrollbarWidth.js index 94a549f..d72c670 100644 --- a/scrollbarWidth.js +++ b/scrollbarWidth.js @@ -1,3 +1,17 @@ -function getScrollbarWidth() { - return window.innerWidth - document.documentElement.clientWidth; +/** based off of https://stackoverflow.com/questions/13382516/getting-scroll-bar-width-using-javascript */ +function getScrollbarWidth(container = document.body) { + const invisibleParent = document.createElement('div'); + invisibleParent.style.visibility = 'hidden'; + invisibleParent.style.overflow = 'scroll'; // force scrollbar to appear + invisibleParent.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps + container.appendChild(invisibleParent); + + const child = document.createElement('div'); + invisibleParent.appendChild(child); + + const scrollbarWidth = invisibleParent.offsetWidth - child.offsetWidth; + + invisibleParent.parentNode.removeChild(invisibleParent); + + return scrollbarWidth; }