Method renderVisibleItems

src/utils/VirtualScroller.ts:549–636

()

	}

	private renderVisibleItems(): void {
		const { startIndex, endIndex, offsetY } = this.state;

		// Track which items are currently visible
		const visibleKeys = new Set<string>();

		// Position the content container
		this.contentContainer.style.transform = `translateY(${offsetY}px)`;

		// Build map of currently rendered elements by key
		const currentElements = new Map<string, HTMLElement>();
		for (const [key, element] of this.renderedElements) {
			if (element.parentElement === this.contentContainer) {
				currentElements.set(key, element);
			}
		}

		// Render visible items in order
		let previousElement: HTMLElement | null = null;
		for (let i = startIndex; i <= endIndex; i++) {
			const item = this.items[i];
			const key = this.getItemKey(item, i);
			visibleKeys.add(key);

			let element = this.renderedElements.get(key);

			if (element && this.invalidatedKeys.has(key)) {
				if (this.resizeObserver) {
					this.resizeObserver.unobserve(element);
				}
				element.remove();
				this.renderedElements.delete(key);
				element = undefined;
			}

			if (!element) {
				// Create new element
				element = this.renderItem(item, i);

				// Add data attribute for measurement tracking
				element.dataset.virtualIndex = String(i);

				this.renderedElements.set(key, element);

				// Observe for size changes
				if (this.resizeObserver) {
					this.resizeObserver.observe(element);
				}
			} else {
				// Update index for existing element
				element.dataset.virtualIndex = String(i);
			}
			this.invalidatedKeys.delete(key);

			// Only manipulate DOM if element is not in correct position
			if (previousElement) {
				// Element should come after previousElement
				if (element.previousElementSibling !== previousElement) {