From 4f059e32987c0cebff7de7aea85745cbd77bb4b1 Mon Sep 17 00:00:00 2001
From: Valentin Silytuin <valentinsilyutin@icloud.com>
Date: Sat, 27 Apr 2024 23:51:01 +0400
Subject: [PATCH] @advdominion/get-scrollbar-width

---
 packages/get-scrollbar-width/README.md    | 17 ++++++++++++++++
 packages/get-scrollbar-width/index.js     | 24 +++++++++++++++++++++++
 packages/get-scrollbar-width/package.json | 14 +++++++++++++
 yarn.lock                                 |  6 ++++++
 4 files changed, 61 insertions(+)
 create mode 100644 packages/get-scrollbar-width/README.md
 create mode 100644 packages/get-scrollbar-width/index.js
 create mode 100644 packages/get-scrollbar-width/package.json

diff --git a/packages/get-scrollbar-width/README.md b/packages/get-scrollbar-width/README.md
new file mode 100644
index 0000000..07dce65
--- /dev/null
+++ b/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));
+```
diff --git a/packages/get-scrollbar-width/index.js b/packages/get-scrollbar-width/index.js
new file mode 100644
index 0000000..a254ab0
--- /dev/null
+++ b/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();
+};
diff --git a/packages/get-scrollbar-width/package.json b/packages/get-scrollbar-width/package.json
new file mode 100644
index 0000000..bd566f6
--- /dev/null
+++ b/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"
+    }
+}
diff --git a/yarn.lock b/yarn.lock
index 67bf6ca..ba04d3c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,12 @@ __metadata:
   version: 8
   cacheKey: 10c0
 
+"@advdominion/get-scrollbar-width@workspace:packages/get-scrollbar-width":
+  version: 0.0.0-use.local
+  resolution: "@advdominion/get-scrollbar-width@workspace:packages/get-scrollbar-width"
+  languageName: unknown
+  linkType: soft
+
 "@advdominion/is@workspace:packages/is":
   version: 0.0.0-use.local
   resolution: "@advdominion/is@workspace:packages/is"