correction when downscrolling

Author: lathug

website/index.html

@@ -373,34 +373,28 @@ <h2>Project Gamma</h2>
 
   (function () {
     let lastMove = 0;
+    let touchStartY = null;
 
-    document.addEventListener("wheel", function (event) {
-      const target = event.target;
-
-      if (
-        target.closest("select, option, button, input, textarea, a, .geo-popup-overlay")
-      ) {
-        return;
-      }
-
+    function shouldForceScroll(target) {
       const activeSection = document.querySelector(".fp-section.active");
       const activeSlide = activeSection?.querySelector(".fp-slide.active");
-
-      const sectionAnchor = activeSection?.dataset.anchor;
       const slideAnchor = activeSlide?.dataset.anchor;
 
-      const shouldForceScroll =
+      return (
+        slideAnchor === "bodytype-viz" ||
         slideAnchor === "body-types-viz" ||
         slideAnchor === "geopolitics-viz" ||
         slideAnchor === "fair-viz" ||
         target.closest("#bodytype-viz") ||
         target.closest("#geopolitics-map-viz") ||
-        target.closest("#fair-viz");
-
-      if (!shouldForceScroll || !window.fullpage_api) return;
+        target.closest("#geo-event-list") ||
+        target.closest("#fair-viz")
+      );
+    }
 
-      const delta = event.deltaY;
-      if (Math.abs(delta) < 10) return;
+    function moveFullpage(deltaY, event) {
+      if (!window.fullpage_api) return;
+      if (Math.abs(deltaY) < 10) return;
 
       const now = Date.now();
       if (now - lastMove < 750) {
@@ -411,11 +405,74 @@ <h2>Project Gamma</h2>
       event.preventDefault();
       lastMove = now;
 
-      if (delta > 0) {
+      if (deltaY > 0) {
+        window.fullpage_api.moveSectionDown();
+      } else {
+        window.fullpage_api.moveSectionUp();
+      }
+    }
+
+    document.addEventListener("wheel", function (event) {
+      const target = event.target;
+
+      if (target.closest("select, option, button, input, textarea, a, .geo-popup-overlay")) {
+        return;
+      }
+
+      if (!shouldForceScroll(target)) return;
+
+      moveFullpage(event.deltaY, event);
+    }, { passive: false, capture: true });
+
+    document.addEventListener("keydown", function (event) {
+      if (!["ArrowDown", "PageDown", "ArrowUp", "PageUp"].includes(event.key)) return;
+
+      const target = event.target;
+      if (target.closest("input, textarea, a, .geo-popup-overlay")) return;
+
+      document.querySelectorAll("select").forEach(select => {
+        select.addEventListener("change", () => select.blur());
+      });
+
+      const activeSection = document.querySelector(".fp-section.active");
+      const activeSlide = activeSection?.querySelector(".fp-slide.active");
+      const slideAnchor = activeSlide?.dataset.anchor;
+
+      const shouldForceScroll =
+        slideAnchor === "bodytype-viz" ||
+        slideAnchor === "body-types-viz" ||
+        slideAnchor === "geopolitics-viz" ||
+        slideAnchor === "fair-viz" ||
+        slideAnchor === "never-medaled";
+
+      if (!shouldForceScroll || !window.fullpage_api) return;
+
+      event.preventDefault();
+
+      if (event.key === "ArrowDown" || event.key === "PageDown") {
         window.fullpage_api.moveSectionDown();
       } else {
         window.fullpage_api.moveSectionUp();
       }
+    }, { capture: true });
+
+    document.addEventListener("touchstart", function (event) {
+      touchStartY = event.touches[0].clientY;
+    }, { passive: true, capture: true });
+
+    document.addEventListener("touchmove", function (event) {
+      const target = event.target;
+
+      if (target.closest("select, option, button, input, textarea, a, .geo-popup-overlay")) {
+        return;
+      }
+
+      if (!shouldForceScroll(target) || touchStartY === null) return;
+
+      const currentY = event.touches[0].clientY;
+      const deltaY = touchStartY - currentY;
+
+      moveFullpage(deltaY, event);
     }, { passive: false, capture: true });
   })();
 </script>