Capture the scroll element in its effect so teardown does not read a cleared binding
This commit is contained in:
parent
68dd74d1fd
commit
fa5a9f6a1e
3 changed files with 16 additions and 10 deletions
|
|
@ -11,8 +11,10 @@
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!element) return
|
if (!element) return
|
||||||
|
|
||||||
|
const target = element
|
||||||
|
|
||||||
const update = () => {
|
const update = () => {
|
||||||
const {scrollTop, scrollHeight, clientHeight} = element as HTMLElement
|
const {scrollTop, scrollHeight, clientHeight} = target as HTMLElement
|
||||||
const scrollable = scrollHeight - clientHeight
|
const scrollable = scrollHeight - clientHeight
|
||||||
|
|
||||||
// A non-scrollable page reads as zero rather than a misleading full bar.
|
// A non-scrollable page reads as zero rather than a misleading full bar.
|
||||||
|
|
@ -21,19 +23,19 @@
|
||||||
|
|
||||||
update()
|
update()
|
||||||
|
|
||||||
element.addEventListener("scroll", update, {passive: true})
|
target.addEventListener("scroll", update, {passive: true})
|
||||||
|
|
||||||
// Content (article, then comments) keeps arriving after mount, resizing the scroll range.
|
// Content (article, then comments) keeps arriving after mount, resizing the scroll range.
|
||||||
const observer = new ResizeObserver(update)
|
const observer = new ResizeObserver(update)
|
||||||
|
|
||||||
observer.observe(element)
|
observer.observe(target)
|
||||||
|
|
||||||
for (const child of element.children) {
|
for (const child of target.children) {
|
||||||
observer.observe(child)
|
observer.observe(child)
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
element.removeEventListener("scroll", update)
|
target.removeEventListener("scroll", update)
|
||||||
observer.disconnect()
|
observer.disconnect()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -12,14 +12,16 @@
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (element) {
|
if (element) {
|
||||||
|
const target = element
|
||||||
|
|
||||||
const onScroll = () => {
|
const onScroll = () => {
|
||||||
scrolled = element.scrollTop > 800
|
scrolled = target.scrollTop > 800
|
||||||
}
|
}
|
||||||
|
|
||||||
element.addEventListener("scroll", onScroll, {passive: true})
|
target.addEventListener("scroll", onScroll, {passive: true})
|
||||||
onScroll()
|
onScroll()
|
||||||
|
|
||||||
return () => element.removeEventListener("scroll", onScroll)
|
return () => target.removeEventListener("scroll", onScroll)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -91,9 +91,11 @@
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (container) {
|
if (container) {
|
||||||
container.addEventListener("scroll", fill, {passive: true})
|
const target = container
|
||||||
|
|
||||||
return () => container.removeEventListener("scroll", fill)
|
target.addEventListener("scroll", fill, {passive: true})
|
||||||
|
|
||||||
|
return () => target.removeEventListener("scroll", fill)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue