From 91fa08074bd1176aade035d441015b92fddb78d7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 31 Jan 2026 11:53:18 +0300
Subject: [PATCH] feat(VirtualList): incorporate shadcn scroll area to replace
 default scoll bar

---
 src/shared/ui/VirtualList/VirtualList.svelte | 63 ++++++++++----------
 1 file changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index 474f450..3c6bf35 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -6,9 +6,11 @@
     - Keyboard navigation (ArrowUp/Down, Home, End)
     - Fixed or dynamic item heights
     - ARIA listbox/option pattern with single tab stop
+    - Custom shadcn ScrollArea scrollbar
 -->
 <script lang="ts" generics="T">
 import { createVirtualizer } from '$shared/lib';
+import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import type { Snippet } from 'svelte';
 
@@ -100,6 +102,9 @@ let {
     children,
 }: Props = $props();
 
+// Reference to the ScrollArea viewport element for attaching the virtualizer
+let viewportRef = $state<HTMLElement | null>(null);
+
 const virtualizer = createVirtualizer(() => ({
     count: items.length,
     data: items,
@@ -107,6 +112,14 @@ const virtualizer = createVirtualizer(() => ({
     overscan,
 }));
 
+// Attach virtualizer.container action to the viewport when it becomes available
+$effect(() => {
+    if (viewportRef) {
+        const { destroy } = virtualizer.container(viewportRef);
+        return destroy;
+    }
+});
+
 $effect(() => {
     const visibleItems = virtualizer.items.map(item => items[item.index]);
     onVisibleItemsChange?.(visibleItems);
@@ -124,40 +137,28 @@ $effect(() => {
 });
 </script>
 
-<div
-    use:virtualizer.container
-    class={cn(
-        'relative overflow-auto rounded-md bg-background',
-        'h-150 w-full',
-        'scroll-smooth',
-        className,
-    )}
-    onfocusin={(e => {
-        // Prevent the browser from jumping the scroll when an inner element gets focus
-        e.preventDefault();
-    })}
+<ScrollArea
+    bind:viewportRef
+    class={cn('relative rounded-md bg-background', 'h-150 w-full', className)}
+    orientation="vertical"
 >
-    <div
-        style:height="{virtualizer.totalSize}px"
-        class="w-full pointer-events-none"
-    >
-    </div>
-
-    {#each virtualizer.items as item (item.key)}
-        <div
-            use:virtualizer.measureElement
-            data-index={item.index}
-            class="absolute top-0 left-0 w-full"
-            style:transform="translateY({item.start}px)"
-        >
-            {#if item.index < items.length}
-                {@render children({
+    <div style:height="{virtualizer.totalSize}px" class="relative w-full">
+        {#each virtualizer.items as item (item.key)}
+            <div
+                use:virtualizer.measureElement
+                data-index={item.index}
+                class="absolute top-0 left-0 w-full"
+                style:transform="translateY({item.start}px)"
+            >
+                {#if item.index < items.length}
+                    {@render children({
     item: items[item.index],
     index: item.index,
     isVisible: item.isVisible,
     proximity: item.proximity,
 })}
-            {/if}
-        </div>
-    {/each}
-</div>
+                {/if}
+            </div>
+        {/each}
+    </div>
+</ScrollArea>