Method render

src/components/virtualList/index.js:81–134

* Render visible items

()

	 * Render visible items
	 */
	render() {
		if (!this.items.length) {
			this.topSpacer.style.height = "0px";
			this.bottomSpacer.style.height = "0px";
			return;
		}

		const scrollTop = this.container.scrollTop;
		const viewportHeight = this.container.clientHeight;

		// Calculate visible range
		const startIndex = Math.max(
			0,
			Math.floor(scrollTop / this.itemHeight) - this.buffer,
		);
		const endIndex = Math.min(
			this.items.length,
			Math.ceil((scrollTop + viewportHeight) / this.itemHeight) + this.buffer,
		);

		// Skip if range hasn't changed
		if (
			startIndex === this.renderedRange.start &&
			endIndex === this.renderedRange.end
		) {
			return;
		}

		// Update spacers
		this.topSpacer.style.height = `${startIndex * this.itemHeight}px`;
		this.bottomSpacer.style.height = `${Math.max(0, (this.items.length - endIndex) * this.itemHeight)}px`;

		// Recycle existing elements
		while (this.itemContainer.firstChild) {
			const child = this.itemContainer.removeChild(
				this.itemContainer.firstChild,
			);
			this.pool.push(child);
		}

		// Render visible items using DocumentFragment
		const fragment = document.createDocumentFragment();

		for (let i = startIndex; i < endIndex; i++) {
			const item = this.items[i];
			const recycledEl = this.pool.pop();
			const el = this.renderItem(item, recycledEl);
			el.style.height = `${this.itemHeight}px`;
			fragment.appendChild(el);
		}

		this.itemContainer.appendChild(fragment);
		this.renderedRange = { start: startIndex, end: endIndex };
	}

	/**
	 * Scroll to a specific item index