Scroll behave fix (#1)

* Scroll vertically

* Scroll container

* ScrollContainer works

* Scroll smooth

src/lib/components/elements/ScrollContainer.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+
+	export let maxHeight = '380px'
+
+	let containerRef: HTMLDivElement
+	let contentRef: HTMLDivElement
+	let isScrolling = false
+	let isVisible = false
+	let observer: IntersectionObserver
+
+	function handleScroll(event: WheelEvent) {
+		if (!isVisible || isScrolling) return
+
+		isScrolling = true
+		const container = containerRef
+		const { scrollTop, scrollHeight, clientHeight } = container
+		const isAtTop = scrollTop === 0
+		const isAtBottom = contentRef.clientHeight === Math.floor(scrollTop + clientHeight)
+		const scrollDiv = () => {
+			event.preventDefault()
+			event.stopPropagation()
+			container.scrollTop += event.deltaY * 3.8
+		}
+		if (event.deltaY > 0) {
+			// Scrolling down
+			if (!isAtBottom) {
+				scrollDiv()
+			}
+		} else if (event.deltaY < 0) {
+			// Scrolling up
+			if (!isAtTop) {
+				scrollDiv()
+			}
+		}
+
+		isScrolling = false
+	}
+
+	function handleIntersection(entries: any) {
+		isVisible = entries[0].isIntersecting
+	}
+
+	onMount(() => {
+		window.addEventListener('wheel', handleScroll, { passive: false })
+
+		observer = new IntersectionObserver(handleIntersection, {
+			root: null,
+			rootMargin: '-100px',
+			threshold: 1.0
+		})
+
+		if (containerRef) {
+			observer.observe(containerRef)
+		}
+
+		return () => {
+			window.removeEventListener('wheel', handleScroll)
+			if (observer) {
+				observer.disconnect()
+			}
+		}
+	})
+</script>
+
+<div
+	bind:this={containerRef}
+	class="flex w-full flex-col overflow-y-auto scroll-smooth rounded-xl"
+	style="max-height: {maxHeight};"
+>
+	<div bind:this={contentRef} class="flex flex-col gap-2">
+		<slot />
+	</div>
+</div>
+
+<style>
+	div::-webkit-scrollbar {
+		display: none;
+	}
+</style>

src/lib/components/sections/Hero.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { base } from '$app/paths'
 	import Cta from '$lib/components/elements/CTA.svelte'
-	import Carousel from 'svelte-carousel'
 	import { browser } from '$app/environment'
 	import Icon from '@iconify/svelte'
+	import ScrollContainer from '$lib/components/elements/ScrollContainer.svelte'
 
 	const slides = [
 		{
@@ -105,9 +105,9 @@
 		</div>
 	</div>
 
-	<div class="mx-auto flex w-full max-w-7xl flex-row rounded-xl sm:px-8 lg:px-0">
+	<div class="mx-auto flex w-full max-w-7xl flex-row sm:px-8 lg:px-0">
 		{#if browser}
-			<Carousel dots={false} arrows={false} autoplay autoplayDuration={5000}>
+			<ScrollContainer>
 				{#each slides as { color, text, animation }, i}
 					<div
 						class="flex w-full flex-col justify-between rounded-xl lg:flex-row"
@@ -123,7 +123,7 @@
 						</div>
 					</div>
 				{/each}
-			</Carousel>
+			</ScrollContainer>
 		{/if}
 	</div>
 </div>
@@ -133,4 +133,8 @@
 		filter: brightness(105%);
 		-webkit-filter: brightness(105%);
 	}
+
+	::-webkit-scrollbar {
+		display: none;
+	}
 </style>