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
*/
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>