This commit is contained in:
Valentin Silytuin 2024-02-27 12:14:03 +04:00
parent 9f1c82f4d3
commit f86a91d8d1
3 changed files with 34 additions and 17 deletions

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{ {
"name": "@advdominion/get-scrollbar-width", "name": "@advdominion/get-scrollbar-width",
"version": "1.0.0", "version": "1.1.0",
"type": "module", "type": "module",
"main": "index.js", "main": "index.js",
"repository": { "repository": {