Class VirtualScroller

src/utils/VirtualScroller.ts:70–892

};

export class VirtualScroller<T> {
	private container: HTMLElement;
	private scrollContainer: HTMLElement;
	private contentContainer: HTMLElement;
	private spacer: HTMLElement;

	private items: T[] = [];
	private estimatedHeight: number; // Default estimated height for unmeasured items
	private overscan: number;
	private renderItem: (item: T, index: number) => HTMLElement;
	private getItemKey: (item: T, index: number) => string;

	private state: VirtualScrollState = {
		startIndex: 0,
		endIndex: 0,
		totalItems: 0,
		offsetY: 0,
	};

	private renderedElements = new Map<string, HTMLElement>();
	private scrollRAF: number | null = null;

	// Variable height tracking
	private itemHeights = new Map<number, number>(); // index -> measured height
	private positionCache: number[] = []; // Cumulative positions [0, 60, 125, 200...]
	private totalHeight = 0;
	private resizeObserver: ResizeObserver | null = null;
	private measurementRAF: number | null = null;
	private pendingMeasurements = new Set<number>();
	private invalidatedKeys = new Set<string>();

	constructor(options: VirtualScrollerOptions<T>) {
		this.container = options.container;
		this.items = options.items;
		this.estimatedHeight = options.itemHeight ?? 0; // Will be calculated if not provided
		this.overscan = options.overscan ?? 5;
		this.renderItem = options.renderItem;
		this.getItemKey = options.getItemKey ?? ((item, index) => String(index));

		this.setupDOM();
		this.attachScrollListener();
		this.setupResizeObserver();

		// If no itemHeight provided, calculate from sample
		if (!options.itemHeight && this.items.length > 0) {
			this.calculateEstimatedHeight();
		}

		this.rebuildPositionCache();
		this.updateVisibleRange();
	}

	private setupDOM(): void {
		// Clear existing content
		this.container.empty();

		// Container should just be relative, parent handles overflow
		this.container.classList.remove("tn-static-margin-top-12px-91e0f558");