@stokr/components-library 2.3.75 → 2.3.76
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.
|
@@ -28,6 +28,30 @@ function findScrolledElement() {
|
|
|
28
28
|
walk(document.body);
|
|
29
29
|
return best;
|
|
30
30
|
}
|
|
31
|
+
function restoreScroll(saved) {
|
|
32
|
+
if (!saved) return;
|
|
33
|
+
if (saved.type === 'window') {
|
|
34
|
+
window.scrollTo(0, saved.y);
|
|
35
|
+
} else if (saved.el && document.contains(saved.el)) {
|
|
36
|
+
saved.el.scrollTop = saved.scrollTop;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
function clearBodyLock() {
|
|
40
|
+
const {
|
|
41
|
+
style
|
|
42
|
+
} = document.body;
|
|
43
|
+
const docEl = document.documentElement;
|
|
44
|
+
style.position = '';
|
|
45
|
+
style.top = '';
|
|
46
|
+
style.left = '';
|
|
47
|
+
style.right = '';
|
|
48
|
+
style.width = '';
|
|
49
|
+
style.height = '';
|
|
50
|
+
style.overflow = '';
|
|
51
|
+
style.paddingRight = '';
|
|
52
|
+
docEl.style.overflow = '';
|
|
53
|
+
docEl.style.setProperty('--scrollbar-compensation', '0px');
|
|
54
|
+
}
|
|
31
55
|
const SideModal = _ref => {
|
|
32
56
|
let {
|
|
33
57
|
children,
|
|
@@ -50,42 +74,48 @@ const SideModal = _ref => {
|
|
|
50
74
|
type: 'window',
|
|
51
75
|
y: window.scrollY
|
|
52
76
|
};else savedScroll.current = null;
|
|
77
|
+
const saved = savedScroll.current;
|
|
53
78
|
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
79
|
+
const isWindowScroll = saved && saved.type === 'window';
|
|
80
|
+
if (isWindowScroll) {
|
|
81
|
+
// Position-fixed lock: avoids browser resetting scroll when overflow changes
|
|
82
|
+
const y = saved.y;
|
|
83
|
+
const docHeight = document.documentElement.scrollHeight;
|
|
84
|
+
document.documentElement.style.overflow = 'hidden';
|
|
85
|
+
document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
|
|
86
|
+
document.body.style.position = 'fixed';
|
|
87
|
+
document.body.style.top = "-".concat(y, "px");
|
|
88
|
+
document.body.style.left = '0';
|
|
89
|
+
document.body.style.right = '0';
|
|
90
|
+
document.body.style.width = '100%';
|
|
91
|
+
document.body.style.height = "".concat(docHeight, "px");
|
|
92
|
+
document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
|
|
93
|
+
} else {
|
|
94
|
+
// Overflow lock; for element scroll we restore after lock
|
|
95
|
+
document.documentElement.style.overflow = 'hidden';
|
|
96
|
+
document.body.style.overflow = 'hidden';
|
|
97
|
+
document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
|
|
98
|
+
document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
|
|
99
|
+
if (saved) {
|
|
100
|
+
requestAnimationFrame(() => {
|
|
101
|
+
restoreScroll(saved);
|
|
102
|
+
requestAnimationFrame(() => restoreScroll(saved));
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
}
|
|
58
106
|
setTimeout(() => setIsVisible(true), 10);
|
|
59
107
|
} else {
|
|
60
108
|
const saved = savedScroll.current;
|
|
61
109
|
savedScroll.current = null;
|
|
62
|
-
|
|
63
|
-
document.body.style.overflow = '';
|
|
64
|
-
document.body.style.paddingRight = '';
|
|
65
|
-
document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
|
|
110
|
+
clearBodyLock();
|
|
66
111
|
setIsVisible(false);
|
|
67
|
-
if (saved)
|
|
68
|
-
requestAnimationFrame(() => {
|
|
69
|
-
if (saved.type === 'window') window.scrollTo(0, saved.y);else if (saved.el && document.contains(saved.el)) saved.el.scrollTop = saved.scrollTop;
|
|
70
|
-
});
|
|
71
|
-
}
|
|
112
|
+
if (saved) requestAnimationFrame(() => restoreScroll(saved));
|
|
72
113
|
}
|
|
73
114
|
return () => {
|
|
74
115
|
const saved = savedScroll.current;
|
|
75
116
|
savedScroll.current = null;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
document.body.style.paddingRight = '';
|
|
79
|
-
document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
|
|
80
|
-
if (saved && saved.el && document.contains(saved.el)) {
|
|
81
|
-
requestAnimationFrame(() => {
|
|
82
|
-
saved.el.scrollTop = saved.scrollTop;
|
|
83
|
-
});
|
|
84
|
-
} else if (saved && saved.type === 'window') {
|
|
85
|
-
requestAnimationFrame(() => {
|
|
86
|
-
window.scrollTo(0, saved.y);
|
|
87
|
-
});
|
|
88
|
-
}
|
|
117
|
+
clearBodyLock();
|
|
118
|
+
if (saved) requestAnimationFrame(() => restoreScroll(saved));
|
|
89
119
|
};
|
|
90
120
|
}, [isOpen]);
|
|
91
121
|
|