ColormaticStudios/Colormatic-Website
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Homepage: Scroll arrow event listener bugfix

Browse Source 
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.
This commit is contained in:
Zakarya
2025-05-05 16:59:17 -07:00
parent 3c1aa4fbe4
commit e6dd87427b
1 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/routes/+page.svelte
View File

@ -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>