From 7e008e806fa940943e44dd137dd24c78813e8f89 Mon Sep 17 00:00:00 2001
From: Jonas <xgv866@alumni.ku.dk>
Date: Thu, 4 Jul 2024 16:57:42 +0200
Subject: [PATCH] update links

---
 index.html               |  3 +++
 src/javascript/scroll.js | 54 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 src/javascript/scroll.js

diff --git a/index.html b/index.html
index 864835f..f2bac0d 100644
--- a/index.html
+++ b/index.html
@@ -126,5 +126,8 @@ <h1>scroll.</h1>
         -->
     </ul>
     <script src="src/javascript/loader.js"></script>
+    <!--
+    <script src="src/javascript/scroll.js"></script>
+    -->
 </body>
 </html>
diff --git a/src/javascript/scroll.js b/src/javascript/scroll.js
new file mode 100644
index 0000000..6c6b9c8
--- /dev/null
+++ b/src/javascript/scroll.js
@@ -0,0 +1,54 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const container = document.querySelector('ul');
+    let isScrolling = false;
+    let startY;
+    let startScrollLeft;
+
+    function smoothScroll(targetScrollLeft) {
+        const startScrollLeft = container.scrollLeft;
+        const distance = targetScrollLeft - startScrollLeft;
+        const duration = 300; // milliseconds
+        let start;
+
+        function step(timestamp) {
+            if (!start) start = timestamp;
+            const elapsed = timestamp - start;
+            const progress = Math.min(elapsed / duration, 1);
+            container.scrollLeft = startScrollLeft + distance * easeInOutCubic(progress);
+
+            if (progress < 1) {
+                window.requestAnimationFrame(step);
+            }
+        }
+
+        window.requestAnimationFrame(step);
+    }
+
+    function easeInOutCubic(t) {
+        return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+    }
+
+    container.addEventListener('wheel', function(e) {
+        e.preventDefault();
+        const scrollAmount = e.deltaY || e.deltaX;
+        smoothScroll(container.scrollLeft + scrollAmount);
+    }, { passive: false });
+
+    container.addEventListener('touchstart', function(e) {
+        isScrolling = true;
+        startY = e.touches[0].pageY;
+        startScrollLeft = container.scrollLeft;
+    }, { passive: false });
+
+    container.addEventListener('touchmove', function(e) {
+        if (!isScrolling) return;
+        
+        e.preventDefault();
+        const touchDeltaY = startY - e.touches[0].pageY;
+        smoothScroll(startScrollLeft + touchDeltaY);
+    }, { passive: false });
+
+    container.addEventListener('touchend', function() {
+        isScrolling = false;
+    });
+});
\ No newline at end of file