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"