JavaScript虚拟滚动实现_技术教程

虚拟滚动通过只渲染可视区和缓冲区元素来提升长列表性能，利用占位器维持滚动高度，滚动时动态更新元素位置与内容，核心是计算可视区域的起始索引并复用DOM，结合requestAnimationFrame优化渲染。

虚拟滚动的核心是只渲染可视区域内的元素，而不是一次性加载全部数据。这样可以极大提升长列表的性能。实现的关键在于计算当前可视区域应该显示哪些项，并动态更新内容。

基本原理

当列表项数量很大时（比如上万条），直接渲染会导致页面卡顿甚至崩溃。虚拟滚动通过以下方式解决这个问题：

只创建可视区域内及少量缓冲区的DOM元素
用一个占位的空白容器撑起整体滚动高度，保持滚动条正常显示
滚动时动态更新可见项的内容和位置

关键参数计算

要实现虚拟滚动，需要知道几个核心值：

itemHeight：每项的高度（固定高度更简单）
containerHeight：容器的可视高度
visibleCount：可视区域内能显示的项目数量，Math.ceil(containerHeight / itemHeight)
startIndex 和 endIndex：根据滚动位置计算当前应显示的起始和结束索引

实现步骤

下面是一个简单的实现思路：

创建外层容器并监听 scroll 事件
使用一个 div 作为占位器（padding 或 transform 模拟位置）
内部渲染有限数量的 item 元素，复用它们
滚动时计算 startIndex = Math.floor(scrollTop / itemHeight)
显示从 startIndex 开始的 visibleCount + buffer 个元素

示例代码片段：


const container = document.getElementById('container');
const itemHeight = 50;
const containerHeight = 500;
const visibleCount = Math.ceil(containerHeight / itemHeight);
const buffer = 5; // 额外渲染上下各5个元素防白屏
const totalItems = 10000;
container.style.height = ${containerHeight}px;
container.style.overflow = 'auto';
container.style.position = 'relative';
const content = document.createElement('div');
content.style.position = 'absolute';
content.style.width = '100%';
container.appendChild(content);
function updateVisibleItems() {
const scrollTop = container.scrollTop;
const start = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
const end = Math.min(totalItems, start + visibleCount + buffer * 2);
// 更新占位高度
content.style.transform = translateY(${start * itemHeight}px);
// 清空并重新填充可见项
content.innerHTML = '';
for (let i = start; i < end; i++) {
const item = document.createElement('div');
item.style.height = ${itemHeight}px;
item.textContent = Item ${i};
content.appendChild(item);
}
}
container.addEventListener('scroll', () => {
requestAnimationFrame(updateVisibleItems);
});// 初始渲染
updateVisibleItems();