@advdominion/get-scrollbar-width

This commit is contained in:
Valentin Silytuin 2024-04-27 23:51:01 +04:00
parent 5359166f88
commit 4f059e3298
4 changed files with 61 additions and 0 deletions

View File

@ -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));
```

View File

@ -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();
};

View File

@ -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"
}
}

View File

@ -5,6 +5,12 @@ __metadata:
version: 8 version: 8
cacheKey: 10c0 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": "@advdominion/is@workspace:packages/is":
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@advdominion/is@workspace:packages/is" resolution: "@advdominion/is@workspace:packages/is"