From 4d9c30667edfef37d8284058e7c45abceb764f5c Mon Sep 17 00:00:00 2001 From: Howard Chiam Date: Wed, 8 Jan 2025 16:33:54 -0700 Subject: [PATCH] let scrollbarWidth.js getScrollbarWidth have scope container --- scrollbarWidth.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) 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; }