src/shared/ui/VirtualList/VirtualList.svelte

@@ -52,7 +52,7 @@ interface Props {
      *
      * @template T - The type of items in the list
      */
-    children: Snippet<[{ item: T; index: number }]>;
+    children: Snippet<[{ item: T; index: number; isVisible: boolean; proximity: number }]>;
 }
 
 let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
@@ -76,8 +76,13 @@ $effect(() => {
     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();
+    })}
 >
     <div
         style:height="{virtualizer.totalSize}px"
@@ -92,7 +97,12 @@ $effect(() => {
             class="absolute top-0 left-0 w-full"
             style:transform="translateY({item.start}px)"
         >
-            {@render children({ item: items[item.index], index: item.index })}
+            {@render children({
+    item: items[item.index],
+    index: item.index,
+    isVisible: item.isVisible,
+    proximity: item.proximity,
+})}
         </div>
     {/each}
 </div>