From e6dd87427bf15a3b26e4732d49b2f66752040afb Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Mon, 5 May 2025 16:59:17 -0700
Subject: [PATCH] Homepage: Scroll arrow event listener bugfix

When you navigate away from the homepage then navigate back, it will
assign a new event listener to scroll without removing the old one.

This change makes it so the event listener is removed when you navigate
away, and is put back normally when you navigate back.
---
 src/routes/+page.svelte | 36 ++++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6b5bf95..1e96f14 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,22 +1,26 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  onMount(() => {
-    let arrow = document.getElementById("scroll-arrow") as HTMLDivElement;
-    if (arrow) {
-      // Arrow is not null
-      window.addEventListener("scroll", (e: Event) => {
-        if (window.scrollY != 0) {
-          if (!arrow.classList.contains("scroll-arrow-hide")) {
-            arrow.classList.add("scroll-arrow-hide");
-          }
-        } else {
-          if (arrow.classList.contains("scroll-arrow-hide")) {
-            arrow.classList.remove("scroll-arrow-hide");
-          }
-        }
-      });
+  let arrow = $state() as HTMLDivElement;
+
+  function checkArrow(e: Event) {
+    if (window.scrollY != 0) {
+      if (!arrow.classList.contains("scroll-arrow-hide")) {
+        arrow.classList.add("scroll-arrow-hide");
+      }
+    } else {
+      if (arrow.classList.contains("scroll-arrow-hide")) {
+        arrow.classList.remove("scroll-arrow-hide");
+      }
     }
+  }
+
+  onMount(() => {
+    window.addEventListener("scroll", checkArrow);
+
+    return () => {
+      window.removeEventListener("scroll", checkArrow);
+    };
   });
 </script>
 
@@ -47,7 +51,7 @@
     <h1>Colormatic: A non-profit project for creation.</h1>
   </div>
 
-  <div id="scroll-arrow">
+  <div bind:this={arrow} class="scroll-arrow">
     <i class="bi bi-arrow-down-circle-fill"></i>
   </div>