@zag-js/remove-scroll 0.9.1 → 0.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +4 -6
- package/dist/index.mjs +4 -6
- package/package.json +4 -3
- package/src/index.ts +84 -0
package/dist/index.js
CHANGED
|
@@ -27,8 +27,7 @@ var import_dom_query = require("@zag-js/dom-query");
|
|
|
27
27
|
var LOCK_CLASSNAME = "data-zag-scroll-lock";
|
|
28
28
|
function assignStyle(el, style) {
|
|
29
29
|
if (!el)
|
|
30
|
-
return
|
|
31
|
-
};
|
|
30
|
+
return;
|
|
32
31
|
const previousStyle = el.style.cssText;
|
|
33
32
|
Object.assign(el.style, style);
|
|
34
33
|
return () => {
|
|
@@ -37,8 +36,7 @@ function assignStyle(el, style) {
|
|
|
37
36
|
}
|
|
38
37
|
function setCSSProperty(el, property, value) {
|
|
39
38
|
if (!el)
|
|
40
|
-
return
|
|
41
|
-
};
|
|
39
|
+
return;
|
|
42
40
|
const previousValue = el.style.getPropertyValue(property);
|
|
43
41
|
el.style.setProperty(property, value);
|
|
44
42
|
return () => {
|
|
@@ -82,13 +80,13 @@ function preventBodyScroll(_document) {
|
|
|
82
80
|
[paddingProperty]: `${scrollbarWidth}px`
|
|
83
81
|
});
|
|
84
82
|
return () => {
|
|
85
|
-
restoreStyle();
|
|
83
|
+
restoreStyle?.();
|
|
86
84
|
win.scrollTo(scrollX, scrollY);
|
|
87
85
|
};
|
|
88
86
|
};
|
|
89
87
|
const cleanups = [setScrollbarWidthProperty(), (0, import_dom_query.isIos)() ? setIOSStyle() : setStyle()];
|
|
90
88
|
return () => {
|
|
91
|
-
cleanups.forEach((
|
|
89
|
+
cleanups.forEach((fn) => fn?.());
|
|
92
90
|
body.removeAttribute(LOCK_CLASSNAME);
|
|
93
91
|
};
|
|
94
92
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -3,8 +3,7 @@ import { isIos } from "@zag-js/dom-query";
|
|
|
3
3
|
var LOCK_CLASSNAME = "data-zag-scroll-lock";
|
|
4
4
|
function assignStyle(el, style) {
|
|
5
5
|
if (!el)
|
|
6
|
-
return
|
|
7
|
-
};
|
|
6
|
+
return;
|
|
8
7
|
const previousStyle = el.style.cssText;
|
|
9
8
|
Object.assign(el.style, style);
|
|
10
9
|
return () => {
|
|
@@ -13,8 +12,7 @@ function assignStyle(el, style) {
|
|
|
13
12
|
}
|
|
14
13
|
function setCSSProperty(el, property, value) {
|
|
15
14
|
if (!el)
|
|
16
|
-
return
|
|
17
|
-
};
|
|
15
|
+
return;
|
|
18
16
|
const previousValue = el.style.getPropertyValue(property);
|
|
19
17
|
el.style.setProperty(property, value);
|
|
20
18
|
return () => {
|
|
@@ -58,13 +56,13 @@ function preventBodyScroll(_document) {
|
|
|
58
56
|
[paddingProperty]: `${scrollbarWidth}px`
|
|
59
57
|
});
|
|
60
58
|
return () => {
|
|
61
|
-
restoreStyle();
|
|
59
|
+
restoreStyle?.();
|
|
62
60
|
win.scrollTo(scrollX, scrollY);
|
|
63
61
|
};
|
|
64
62
|
};
|
|
65
63
|
const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()];
|
|
66
64
|
return () => {
|
|
67
|
-
cleanups.forEach((
|
|
65
|
+
cleanups.forEach((fn) => fn?.());
|
|
68
66
|
body.removeAttribute(LOCK_CLASSNAME);
|
|
69
67
|
};
|
|
70
68
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/remove-scroll",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "JavaScript utility to remove scroll on body",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -13,13 +13,14 @@
|
|
|
13
13
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/remove-scroll",
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"files": [
|
|
16
|
-
"dist
|
|
16
|
+
"dist",
|
|
17
|
+
"src"
|
|
17
18
|
],
|
|
18
19
|
"publishConfig": {
|
|
19
20
|
"access": "public"
|
|
20
21
|
},
|
|
21
22
|
"dependencies": {
|
|
22
|
-
"@zag-js/dom-query": "0.
|
|
23
|
+
"@zag-js/dom-query": "0.10.0"
|
|
23
24
|
},
|
|
24
25
|
"devDependencies": {
|
|
25
26
|
"clean-package": "2.2.0"
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { isIos } from "@zag-js/dom-query"
|
|
2
|
+
|
|
3
|
+
const LOCK_CLASSNAME = "data-zag-scroll-lock"
|
|
4
|
+
|
|
5
|
+
function assignStyle(el: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>) {
|
|
6
|
+
if (!el) return
|
|
7
|
+
const previousStyle = el.style.cssText
|
|
8
|
+
Object.assign(el.style, style)
|
|
9
|
+
return () => {
|
|
10
|
+
el.style.cssText = previousStyle
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
function setCSSProperty(el: HTMLElement | null | undefined, property: string, value: string) {
|
|
15
|
+
if (!el) return
|
|
16
|
+
const previousValue = el.style.getPropertyValue(property)
|
|
17
|
+
el.style.setProperty(property, value)
|
|
18
|
+
return () => {
|
|
19
|
+
if (previousValue) {
|
|
20
|
+
el.style.setProperty(property, previousValue)
|
|
21
|
+
} else {
|
|
22
|
+
el.style.removeProperty(property)
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function getPaddingProperty(documentElement: HTMLElement) {
|
|
28
|
+
// RTL <body> scrollbar
|
|
29
|
+
const documentLeft = documentElement.getBoundingClientRect().left
|
|
30
|
+
const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft
|
|
31
|
+
return scrollbarX ? "paddingLeft" : "paddingRight"
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export function preventBodyScroll(_document?: Document) {
|
|
35
|
+
const doc = _document ?? document
|
|
36
|
+
const win = doc.defaultView ?? window
|
|
37
|
+
|
|
38
|
+
const { documentElement, body } = doc
|
|
39
|
+
|
|
40
|
+
const locked = body.hasAttribute(LOCK_CLASSNAME)
|
|
41
|
+
if (locked) return
|
|
42
|
+
|
|
43
|
+
body.setAttribute(LOCK_CLASSNAME, "")
|
|
44
|
+
|
|
45
|
+
const scrollbarWidth = win.innerWidth - documentElement.clientWidth
|
|
46
|
+
const setScrollbarWidthProperty = () => setCSSProperty(documentElement, "--scrollbar-width", `${scrollbarWidth}px`)
|
|
47
|
+
const paddingProperty = getPaddingProperty(documentElement)
|
|
48
|
+
|
|
49
|
+
const setStyle = () =>
|
|
50
|
+
assignStyle(body, {
|
|
51
|
+
overflow: "hidden",
|
|
52
|
+
[paddingProperty]: `${scrollbarWidth}px`,
|
|
53
|
+
})
|
|
54
|
+
|
|
55
|
+
// Only iOS doesn't respect `overflow: hidden` on document.body
|
|
56
|
+
const setIOSStyle = () => {
|
|
57
|
+
const { scrollX, scrollY, visualViewport } = win
|
|
58
|
+
|
|
59
|
+
// iOS 12 does not support `visuaViewport`.
|
|
60
|
+
const offsetLeft = visualViewport?.offsetLeft ?? 0
|
|
61
|
+
const offsetTop = visualViewport?.offsetTop ?? 0
|
|
62
|
+
|
|
63
|
+
const restoreStyle = assignStyle(body, {
|
|
64
|
+
position: "fixed",
|
|
65
|
+
overflow: "hidden",
|
|
66
|
+
top: `${-(scrollY - Math.floor(offsetTop))}px`,
|
|
67
|
+
left: `${-(scrollX - Math.floor(offsetLeft))}px`,
|
|
68
|
+
right: "0",
|
|
69
|
+
[paddingProperty]: `${scrollbarWidth}px`,
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
return () => {
|
|
73
|
+
restoreStyle?.()
|
|
74
|
+
win.scrollTo(scrollX, scrollY)
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
const cleanups = [setScrollbarWidthProperty(), isIos() ? setIOSStyle() : setStyle()]
|
|
79
|
+
|
|
80
|
+
return () => {
|
|
81
|
+
cleanups.forEach((fn) => fn?.())
|
|
82
|
+
body.removeAttribute(LOCK_CLASSNAME)
|
|
83
|
+
}
|
|
84
|
+
}
|