1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import '../browser.mjs';
import { easeInOutCubic } from '../easings.mjs';
import { isWindow } from '../types.mjs';
import { rAF, cAF } from '../raf.mjs';
import { getStyle } from './style.mjs';
import { isClient } from '@vueuse/core';
const isScroll = (el, isVertical) => {
if (!isClient)
return false;
const key = {
undefined: "overflow",
true: "overflow-y",
false: "overflow-x"
}[String(isVertical)];
const overflow = getStyle(el, key);
return ["scroll", "auto", "overlay"].some((s) => overflow.includes(s));
};
const getScrollContainer = (el, isVertical) => {
if (!isClient)
return;
let parent = el;
while (parent) {
if ([window, document, document.documentElement].includes(parent))
return window;
if (isScroll(parent, isVertical))
return parent;
parent = parent.parentNode;
}
return parent;
};
let scrollBarWidth;
const getScrollBarWidth = (namespace) => {
var _a;
if (!isClient)
return 0;
if (scrollBarWidth !== void 0)
return scrollBarWidth;
const outer = document.createElement("div");
outer.className = `${namespace}-scrollbar__wrap`;
outer.style.visibility = "hidden";
outer.style.width = "100px";
outer.style.position = "absolute";
outer.style.top = "-9999px";
document.body.appendChild(outer);
const widthNoScroll = outer.offsetWidth;
outer.style.overflow = "scroll";
const inner = document.createElement("div");
inner.style.width = "100%";
outer.appendChild(inner);
const widthWithScroll = inner.offsetWidth;
(_a = outer.parentNode) == null ? void 0 : _a.removeChild(outer);
scrollBarWidth = widthNoScroll - widthWithScroll;
return scrollBarWidth;
};
function scrollIntoView(container, selected) {
if (!isClient)
return;
if (!selected) {
container.scrollTop = 0;
return;
}
const offsetParents = [];
let pointer = selected.offsetParent;
while (pointer !== null && container !== pointer && container.contains(pointer)) {
offsetParents.push(pointer);
pointer = pointer.offsetParent;
}
const top = selected.offsetTop + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0);
const bottom = top + selected.offsetHeight;
const viewRectTop = container.scrollTop;
const viewRectBottom = viewRectTop + container.clientHeight;
if (top < viewRectTop) {
container.scrollTop = top;
} else if (bottom > viewRectBottom) {
container.scrollTop = bottom - container.clientHeight;
}
}
function animateScrollTo(container, from, to, duration, callback) {
const startTime = Date.now();
let handle;
const scroll = () => {
const timestamp = Date.now();
const time = timestamp - startTime;
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, from, to, duration);
if (isWindow(container)) {
container.scrollTo(window.pageXOffset, nextScrollTop);
} else {
container.scrollTop = nextScrollTop;
}
if (time < duration) {
handle = rAF(scroll);
} else if (typeof callback === "function") {
callback();
}
};
scroll();
return () => {
handle && cAF(handle);
};
}
const getScrollElement = (target, container) => {
if (isWindow(container)) {
return target.ownerDocument.documentElement;
}
return container;
};
const getScrollTop = (container) => {
if (isWindow(container)) {
return window.scrollY;
}
return container.scrollTop;
};
export { animateScrollTo, getScrollBarWidth, getScrollContainer, getScrollElement, getScrollTop, isScroll, scrollIntoView };
//# sourceMappingURL=scroll.mjs.map