From fa5a9f6a1e5b965eb8cb139ba70a6a4ec18e4b23 Mon Sep 17 00:00:00 2001
From: Coracle-Bot <npub1klq6260@nostr.local>
Date: Thu, 10 Sep 2026 03:21:27 +0000
Subject: [PATCH] Capture the scroll element in its effect so teardown does not
 read a cleared binding

---
 src/app/components/ReadingProgress.svelte | 12 +++++++-----
 src/lib/components/ScrollToTop.svelte     |  8 +++++---
 src/lib/components/VirtualList.svelte     |  6 ++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/app/components/ReadingProgress.svelte b/src/app/components/ReadingProgress.svelte
index 6fe644ed..ae555c3b 100644
--- a/src/app/components/ReadingProgress.svelte
+++ b/src/app/components/ReadingProgress.svelte
@@ -11,8 +11,10 @@
   $effect(() => {
     if (!element) return
 
+    const target = element
+
     const update = () => {
-      const {scrollTop, scrollHeight, clientHeight} = element as HTMLElement
+      const {scrollTop, scrollHeight, clientHeight} = target as HTMLElement
       const scrollable = scrollHeight - clientHeight
 
       // A non-scrollable page reads as zero rather than a misleading full bar.
@@ -21,19 +23,19 @@
 
     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.
     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)
     }
 
     return () => {
-      element.removeEventListener("scroll", update)
+      target.removeEventListener("scroll", update)
       observer.disconnect()
     }
   })
diff --git a/src/lib/components/ScrollToTop.svelte b/src/lib/components/ScrollToTop.svelte
index a09168ec..455dae36 100644
--- a/src/lib/components/ScrollToTop.svelte
+++ b/src/lib/components/ScrollToTop.svelte
@@ -12,14 +12,16 @@
 
   $effect(() => {
     if (element) {
+      const target = element
+
       const onScroll = () => {
-        scrolled = element.scrollTop > 800
+        scrolled = target.scrollTop > 800
       }
 
-      element.addEventListener("scroll", onScroll, {passive: true})
+      target.addEventListener("scroll", onScroll, {passive: true})
       onScroll()
 
-      return () => element.removeEventListener("scroll", onScroll)
+      return () => target.removeEventListener("scroll", onScroll)
     }
   })
 </script>
diff --git a/src/lib/components/VirtualList.svelte b/src/lib/components/VirtualList.svelte
index c75fb14a..847b6a63 100644
--- a/src/lib/components/VirtualList.svelte
+++ b/src/lib/components/VirtualList.svelte
@@ -91,9 +91,11 @@
 
   $effect(() => {
     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>