feat(VirtualList): add proximity and isVisible props

This commit is contained in:
Ilia Mashkov
2026-01-22 15:40:37 +03:00
parent 80efa49ad0
commit be13a5c8a0

View File

@@ -52,7 +52,7 @@ interface Props {
* *
* @template T - The type of items in the list * @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 }: let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
@@ -76,8 +76,13 @@ $effect(() => {
class={cn( class={cn(
'relative overflow-auto rounded-md bg-background', 'relative overflow-auto rounded-md bg-background',
'h-150 w-full', 'h-150 w-full',
'scroll-smooth',
className, className,
)} )}
onfocusin={(e => {
// Prevent the browser from jumping the scroll when an inner element gets focus
e.preventDefault();
})}
> >
<div <div
style:height="{virtualizer.totalSize}px" style:height="{virtualizer.totalSize}px"
@@ -92,7 +97,12 @@ $effect(() => {
class="absolute top-0 left-0 w-full" class="absolute top-0 left-0 w-full"
style:transform="translateY({item.start}px)" 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> </div>
{/each} {/each}
</div> </div>