grain.social
chadtmiller.com
+13
-10
src/components/molecules/grain-pull-to-refresh.js
+13
-10
src/components/molecules/grain-pull-to-refresh.js
···
52
52
53
53
connectedCallback() {
54
54
super.connectedCallback();
55
-
this.#scrollContainer = this.#findScrollContainer();
56
55
this.addEventListener('touchstart', this.#onTouchStart, { passive: true });
57
56
this.addEventListener('touchmove', this.#onTouchMove, { passive: false });
58
57
this.addEventListener('touchend', this.#onTouchEnd, { passive: true });
59
58
}
60
59
61
60
#findScrollContainer() {
62
-
let el = this.parentElement;
61
+
let el = this;
63
62
while (el) {
64
-
// Check through shadow DOM boundaries
65
-
if (el.scrollHeight > el.clientHeight) {
66
-
const style = getComputedStyle(el);
67
-
if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
68
-
return el;
69
-
}
63
+
// Get next parent, crossing shadow DOM boundaries
64
+
const parent = el.parentElement || el.getRootNode()?.host;
65
+
if (!parent || parent === document.documentElement) break;
66
+
67
+
const style = getComputedStyle(parent);
68
+
if (style.overflowY === 'auto' || style.overflowY === 'scroll') {
69
+
return parent;
70
70
}
71
-
// Traverse up through shadow roots
72
-
el = el.parentElement || el.getRootNode()?.host;
71
+
el = parent;
73
72
}
74
73
return null;
75
74
}
76
75
77
76
#getScrollTop() {
77
+
// Find scroll container lazily (content may not be loaded at connectedCallback)
78
+
if (!this.#scrollContainer) {
79
+
this.#scrollContainer = this.#findScrollContainer();
80
+
}
78
81
if (this.#scrollContainer) {
79
82
return this.#scrollContainer.scrollTop;
80
83
}