@advdominion/get-scrollbar-width

packages/get-scrollbar-width/README.md

@@ -0,0 +1,17 @@
+# get-scrollbar-width
+
+Get window scrollbar width (if present):
+
+```js
+import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
+
+console.log(getScrollbarWidth());
+```
+
+Get system scrollbar width:
+
+```js
+import { getScrollbarWidth } from '@advdominion/get-scrollbar-width';
+
+console.log(getScrollbarWidth(false));
+```

packages/get-scrollbar-width/index.js

@@ -0,0 +1,24 @@
+const scrollbarWidth = () => {
+    const outer = document.createElement('div');
+    outer.style.visibility = 'hidden';
+    outer.style.width = '100px';
+    document.body.append(outer);
+    const widthNoScroll = outer.offsetWidth;
+    outer.style.overflow = 'scroll';
+    const inner = document.createElement('div');
+    inner.style.width = '100%';
+    outer.append(inner);
+    const widthWithScroll = inner.offsetWidth;
+    outer.remove();
+    return widthNoScroll - widthWithScroll;
+};
+
+export const getScrollbarWidth = (getWindowScrollbar = true) => {
+    if (getWindowScrollbar) {
+        if (document.body.clientHeight > window.innerHeight) {
+            return scrollbarWidth();
+        }
+        return 0;
+    }
+    return scrollbarWidth();
+};

packages/get-scrollbar-width/package.json

@@ -0,0 +1,14 @@
+{
+    "name": "@advdominion/get-scrollbar-width",
+    "version": "1.1.0",
+    "type": "module",
+    "main": "index.js",
+    "repository": {
+        "type": "git",
+        "url": "https://gitea.optiweb.ru/public/helpers.git"
+    },
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    }
+}