html虛擬滾動，解決dom渲染過多卡頓的問題

在這里插入圖片描述


<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>極簡虛擬滾動</title><style>.container {width: 300px;height: 300px;border: 1px solid #ccc;overflow: auto;position: relative;}.placeholder {height: 50000px; /* 假設總高度為1000個item * 50px */}.item {position: absolute;left: 0;top: 0;width: 100%;height: 50px;line-height: 50px;text-align: center;box-sizing: border-box;will-change: transform;}.item:nth-child(odd) {background-color: #00ccff;}.item:nth-child(even) {background-color: #ffcc00;}</style></head><body><div class="container"><div class="placeholder"></div><div class="items-container"></div></div><script>const container = document.querySelector(".container");const itemsContainer = document.querySelector(".items-container");const itemHeight = 50;const visibleCount = Math.ceil(container.clientHeight / itemHeight); // 屏幕能顯示的數量const buffer = 2; // 緩沖行數const totalItems = 1000; // 總數據量function render() {const scrollTop = container.scrollTop;const startIndex = Math.max(0,Math.floor(scrollTop / itemHeight) - buffer);const endIndex = Math.min(totalItems,startIndex + visibleCount + buffer * 2);// 清空當前渲染的內容itemsContainer.innerHTML = "";for (let i = startIndex; i < endIndex; i++) {const item = document.createElement("div");item.className = "item";item.textContent = `Item ${i}`;item.style.transform = `translateY(${i * itemHeight}px)`;itemsContainer.appendChild(item);}}// 初始渲染render();// 監聽滾動事件container.addEventListener("scroll", () => {requestAnimationFrame(render);});</script></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/87274.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/87274.shtml
英文地址，請注明出處：http://en.pswp.cn/web/87274.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！