refactor(background): use event listener instead of onload

1 files changed, 18 insertions, 19 deletions

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 3d5da47..7d5ef28 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -163,23 +163,22 @@ import Base from "../layout/Base.astro";
       </div>
     </section>
   </main>
-</Base>
-
-<script is:inline defer>
-  const sections = document.querySelectorAll("section[data-scroll]");
-  document.addEventListener("scroll", () => {
-    sections.forEach((section) => {
-      const rect = section.getBoundingClientRect();
-      if (
-        section.top + window.scrollY > window.scrollY ||
-        (rect.bottom + +window.scrollY) * 2 < window.scrollY
-      )
-        return;
-      const content = section.querySelector(".content");
-      if (content == null || !(content instanceof HTMLElement))
-        throw new Error(`Invalid section ${section}`);
-      const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
-      content.style.top = `${65 - ratio * 20}%`;
+  <script is:inline defer>
+    const sections = document.querySelectorAll("section[data-scroll]");
+    document.addEventListener("scroll", () => {
+      sections.forEach((section) => {
+        const rect = section.getBoundingClientRect();
+        if (
+          section.top + window.scrollY > window.scrollY ||
+          (rect.bottom + +window.scrollY) * 2 < window.scrollY
+        )
+          return;
+        const content = section.querySelector(".content");
+        if (content == null || !(content instanceof HTMLElement))
+          throw new Error(`Invalid section ${section}`);
+        const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
+        content.style.top = `${65 - ratio * 20}%`;
+      });
     });
-  });
-</script>
+  </script>
+</Base>