Horizontal Scroll

1<script lang="ts">
2	import { cn } from '$UTILS$';
3	import { setScrollContext } from './ctx';
4	import type { Snippet } from 'svelte';
5	import { onMount } from 'svelte';
6 
7	let {
8		class: className,
9		sensitivity = 1.5,
10		damping = 0.1,
11		children
12	}: {
13		class?: string;
14		sensitivity?: number;
15		damping?: number;
16		children: Snippet;
17	} = $props();
18 
19	let scrollContainer: HTMLDivElement | undefined = $state();
20 
21	let targetScroll = 0;
22	let currentScroll = 0;
23	let isAnimating = false;
24	let animationFrame: number;
25 
26	onMount(() => {
27		return () => {
28			if (animationFrame) cancelAnimationFrame(animationFrame);
29		};
30	});
31 
32	function update() {
33		if (!scrollContainer) return;
34 
35		const diff = targetScroll - currentScroll;
36 
37		if (Math.abs(diff) < 0.5) {
38			currentScroll = targetScroll;
39			scrollContainer.scrollLeft = currentScroll;
40			isAnimating = false;
41			return;
42		}
43 
44		currentScroll += diff * damping;
45		scrollContainer.scrollLeft = currentScroll;
46 
47		animationFrame = requestAnimationFrame(update);
48	}
49 
50	function handleWheel(e: WheelEvent) {
51		if (!scrollContainer) return;
52		if (e.deltaY === 0) return;
53 
54		const maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth;
55		if (maxScroll <= 0) return;
56 
57		e.preventDefault();
58 
59		if (!isAnimating) {
60			currentScroll = scrollContainer.scrollLeft;
61			targetScroll = currentScroll;
62			isAnimating = true;
63			animationFrame = requestAnimationFrame(update);
64		}
65 
66		targetScroll += e.deltaY * sensitivity;
67 
68		targetScroll = Math.max(0, Math.min(targetScroll, maxScroll));
69	}
70 
71	setScrollContext({
72		scrollLeft: () => {
73			if (!scrollContainer) return;
74			if (!isAnimating) {
75				currentScroll = scrollContainer.scrollLeft;
76				targetScroll = currentScroll;
77				isAnimating = true;
78				animationFrame = requestAnimationFrame(update);
79			}
80			targetScroll = Math.max(0, targetScroll - 300);
81		},
82		scrollRight: () => {
83			if (!scrollContainer) return;
84			const maxScroll = scrollContainer.scrollWidth - scrollContainer.clientWidth;
85			if (!isAnimating) {
86				currentScroll = scrollContainer.scrollLeft;
87				targetScroll = currentScroll;
88				isAnimating = true;
89				animationFrame = requestAnimationFrame(update);
90			}
91			targetScroll = Math.min(maxScroll, targetScroll + 300);
92		},
93		getElement: () => scrollContainer
94	});
95</script>
96 
97<div
98	bind:this={scrollContainer}
99	onwheel={handleWheel}
100	class={cn('flex w-full overflow-x-auto overflow-y-hidden select-none', className)}
101	style="scrollbar-width: none; -ms-overflow-style: none;"
102>
103// … truncated