glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(VirtualList): add overscan support

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-13 20:02:50 +03:00
parent a29b80efbb
commit 2f15148cdb
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/shared/ui/VirtualList/VirtualList.svelte
View File

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