From e8ebeafdbec1b66ebce5a079c3aea8eaa1a05a42 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Sun, 23 Jun 2024 16:56:09 +0200
Subject: [PATCH] Put it in order

Remove debounce for scroll stop
---
 src/routes/journey.tsx | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
index f54fdcd..60b5aae 100644
--- a/src/routes/journey.tsx
+++ b/src/routes/journey.tsx
@@ -433,48 +433,46 @@ export default function Journeys() {
     if (otherRow === undefined) return;
 
     otherRow.scrollLeft = target.scrollLeft;
-    // Debounce
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => {
-      setIsScrolling(false);
-    }, 100);
   }
 
   return (
-    <>
+    <main class="flex h-dvh flex-col-reverse">
+      <p>Starting station</p>{" "}
       <div
-        ref={setRow1}
-        class="flex snap-mandatory gap-4 overflow-y-scroll *:flex-none"
-        classList={{
-          "snap-x": !isScrolling(),
-        }}
+        onScroll={handleScroll}
+        class="grid snap-x snap-mandatory grid-flow-col gap-4 overflow-y-scroll"
+        onScrollEnd={() => setIsScrolling(false)}
       >
         <For each={Array(10)}>
           {(_, index) => (
             <div
               id={`element-${index}`}
-              class="h-56 w-screen snap-center snap-always bg-orange-500"
+              class="h-56 w-screen snap-center snap-always bg-green-500"
             >
               Content {index()}
             </div>
           )}
         </For>
       </div>
+      <div>Important Station</div>
       <div
-        onScroll={handleScroll}
-        class="flex snap-x snap-mandatory gap-4 overflow-y-scroll *:flex-none"
+        ref={setRow1}
+        class="grid snap-mandatory grid-flow-col gap-4 overflow-y-scroll "
+        classList={{
+          "snap-x": !isScrolling(),
+        }}
       >
         <For each={Array(10)}>
           {(_, index) => (
             <div
               id={`element-${index}`}
-              class="h-56 w-screen snap-center snap-always bg-green-500"
+              class="h-56 w-screen snap-center snap-always bg-orange-500"
             >
               Content {index()}
             </div>
           )}
         </For>
       </div>
-    </>
+    </main>
   );
 }
-- 
knotmirror 0.0.1