leaflet.pub
a tool for shared writing and social publishing
fixed bottom scroll margin issues on doc
cozylittle.house
+65
-15
+2
src/utils/focusBlock.ts
+2
src/utils/focusBlock.ts
+63
-15
src/utils/scrollIntoViewIfNeeded.ts
+63
-15
src/utils/scrollIntoViewIfNeeded.ts
···
2
2
el: Element | null,
3
3
centerIfNeeded: boolean = true,
4
4
behavior?: ScrollBehavior,
5
+
rootBottomMargin?: number,
5
6
) {
7
+
console.log("this should scroll up now!");
8
+
6
9
if (!el) {
7
10
return;
8
11
}
9
-
let observer = new IntersectionObserver(function ([entry]) {
10
-
const ratio = entry.intersectionRatio;
11
12
12
-
if (ratio < 1) {
13
-
let place =
14
-
ratio <= 0 && centerIfNeeded
15
-
? ("center" as const)
16
-
: ("nearest" as const);
17
-
el.scrollIntoView({
18
-
block: place,
19
-
inline: place,
20
-
behavior: behavior ? behavior : "auto",
21
-
});
22
-
}
23
-
observer.disconnect();
24
-
});
13
+
let observer = new IntersectionObserver(
14
+
function ([entry]) {
15
+
const ratio = entry.intersectionRatio;
16
+
if (ratio < 1) {
17
+
let place =
18
+
ratio <= 0 && centerIfNeeded
19
+
? ("center" as const)
20
+
: ("nearest" as const);
21
+
el.scrollIntoView({
22
+
block: place,
23
+
inline: place,
24
+
behavior: behavior ? behavior : "auto",
25
+
});
26
+
27
+
// If rootBottomMargin is defined, adjust scroll position to keep element away from bottom
28
+
if (rootBottomMargin) {
29
+
requestAnimationFrame(() => {
30
+
let rect = el.getBoundingClientRect();
31
+
let scrollContainer = getScrollParent(el);
32
+
let scrollContainerHeight = scrollContainer.clientHeight;
33
+
let distanceFromBottom = scrollContainerHeight - rect.bottom;
34
+
35
+
console.log("containerHeight: " + scrollContainerHeight);
36
+
console.log("el bottom: " + rect.bottom);
37
+
38
+
scrollContainer.scrollBy({
39
+
top: Math.abs(rootBottomMargin + distanceFromBottom),
40
+
behavior: behavior ? behavior : "auto",
41
+
});
42
+
});
43
+
}
44
+
}
45
+
observer.disconnect();
46
+
},
47
+
{
48
+
rootMargin: rootBottomMargin
49
+
? `0px 0px ${rootBottomMargin}px 0px`
50
+
: "0px",
51
+
},
52
+
);
25
53
observer.observe(el);
26
54
}
55
+
56
+
function getScrollParent(el: Element) {
57
+
let parent = el.parentElement;
58
+
59
+
while (parent) {
60
+
const { overflow, overflowY } = window.getComputedStyle(parent);
61
+
62
+
if (
63
+
overflow === "auto" ||
64
+
overflow === "scroll" ||
65
+
overflowY === "auto" ||
66
+
overflowY === "scroll"
67
+
) {
68
+
return parent;
69
+
}
70
+
71
+
parent = parent.parentElement;
72
+
}
73
+
return document.documentElement;
74
+
}