Improve scrolling, discover page

src/lib/components/Dialog.svelte

@@ -11,7 +11,8 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="relative card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+    class="relative scroll-container card2 bg-alt absolute max-h-[90vh] w-[90vw] overflow-auto text-base-content sm:w-[520px]"
+
     transition:fly={{duration: 300}}>
     <slot />
   </div>

src/lib/components/Drawer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {fade, slide} from "@lib/transition"
+  import {fade, translate} from "@lib/transition"
 
   export let onClose
 </script>
@@ -10,8 +10,8 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
-    transition:slide={{axis: "x", duration: 300}}>
+    class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    transition:translate={{axis: "x", duration: 300}}>
     <slot />
   </div>
 </div>

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0">
+<div class="max-h-screen flex-grow overflow-auto bg-base-200 pb-14 sm:pb-0 scroll-container">
   <slot />
 </div>

src/lib/html.ts

@@ -34,15 +34,19 @@ export const createScroller = ({
   let done = false
 
   const check = async () => {
-    // While we have empty space, fill it
-    const {scrollY, innerHeight} = window
-    const {scrollHeight, scrollTop} = element
-    const offset = Math.abs(scrollTop || scrollY)
-    const shouldLoad = offset + innerHeight + threshold > scrollHeight
+    const container = element.closest('.scroll-container')
 
-    // Only trigger loading the first time we reach the threshold
-    if (shouldLoad) {
-      await onScroll()
+    if (container) {
+      // While we have empty space, fill it
+      const {scrollY, innerHeight} = window
+      const {scrollHeight, scrollTop} = container
+      const offset = Math.abs(scrollTop || scrollY)
+      const shouldLoad = offset + innerHeight + threshold > scrollHeight
+
+      // Only trigger loading the first time we reach the threshold
+      if (shouldLoad) {
+        await onScroll()
+      }
     }
 
     // No need to check all that often

src/lib/transition.ts

@@ -8,6 +8,34 @@ export {fade, slide} from "svelte/transition"
 export const fly = (node: Element, params?: FlyParams | undefined) =>
   baseFly(node, {y: 20, ...params})
 
+export type TranslateParams = {
+  delay?: number,
+  duration?: number,
+  easing?: (t: number) => number
+  axis?: "x" | "y"
+  reverse?: boolean
+}
+
+export const translate = (
+  node: Element,
+  {delay = 0, duration = 400, easing = cubicOut, axis = "y", reverse = false}: TranslateParams = {}
+) => {
+  return {
+    delay,
+    duration,
+    easing,
+    css: (t: number) => {
+      const p = reverse ? `${t * 100}%` : `${100 - t * 100}%`
+
+      if (axis === "x") {
+        return `transform: translateX(${p})`
+      } else {
+        return `transform: translateY(${p})`
+      }
+    }
+  }
+}
+
 // Copy-pasted and tweaked from slide source code
 export function slideAndFade(
   node: any,