feat(VirtualList): add overscan support

This commit is contained in:
Ilia Mashkov
2026-01-13 20:02:50 +03:00
parent a29b80efbb
commit 2f15148cdb

View File

@@ -28,6 +28,11 @@ interface Props {
* @default 80
*/
itemHeight?: number | ((index: number) => number);
/**
* Optional overscan value for the virtual list.
* @default 5
*/
overscan?: number;
/**
* Optional CSS class string for styling the container
* (follows shadcn convention for className prop)
@@ -48,7 +53,7 @@ interface Props {
children: Snippet<[{ item: T; index: number }]>;
}
let { items, itemHeight = 80, class: className, children }: Props = $props();
let { items, itemHeight = 80, overscan = 5, class: className, children }: Props = $props();
let activeIndex = $state(0);
const itemRefs = new Map<number, HTMLElement>();
@@ -56,6 +61,7 @@ const itemRefs = new Map<number, HTMLElement>();
const virtual = createVirtualizer(() => ({
count: items.length,
estimateSize: typeof itemHeight === 'function' ? itemHeight : () => itemHeight,
overscan,
}));
function registerItem(node: HTMLElement, index: number) {