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,25 +137,12 @@ $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>
-
+    <div style:height="{virtualizer.totalSize}px" class="relative w-full">
         {#each virtualizer.items as item (item.key)}
             <div
                 use:virtualizer.measureElement
@@ -160,4 +160,5 @@ $effect(() => {
                 {/if}
             </div>
         {/each}
-</div>
+    </div>
+</ScrollArea>