如何在表格中实现JavaScript虚拟滚动：按需加载并移除元素

虚拟滚动的核心是只渲染当前视口可见（及少量缓冲）的行，用占位元素模拟表格总高度，让滚动条行为正常。针对你100条数据、初始渲染15行的需求，具体实现步骤如下：

核心思路 #

1. 用固定高度的占位容器撑出整个表格的总高度，保证滚动条能正常拖动到末尾。
2. 监听表格容器的滚动事件，根据滚动偏移量计算当前需要渲染的行范围。
3. 动态更新渲染区域的行数据，并调整渲染区域的位置，让它始终对齐视口。

具体实现步骤 #

1. 基础结构与样式 #

先搭建HTML结构，包含滚动容器、占位容器（模拟总高度）、行渲染容器：

<div class="table-container" id="tableContainer">
  <!-- 占位容器，撑出总高度 -->
  <div class="placeholder" id="placeholder"></div>
  <!-- 实际渲染行的容器 -->
  <div class="rows-container" id="rowsContainer"></div>
</div>

CSS设置基础样式，行固定高度，渲染容器用绝对定位：

.table-container {
  width: 100%;
  height: 450px; /* 视口高度，刚好装15行（假设每行30px） */
  overflow: auto;
  position: relative;
  border: 1px solid #ddd;
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.rows-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.table-row {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}

2. 核心JS逻辑 #

假设每行高度固定为30px，初始渲染15行，额外加2行缓冲避免滚动时出现空白：

// 模拟100条数据
const totalRows = 100;
const rowHeight = 30;
const visibleRows = 15;
const bufferRows = 2; // 前后缓冲行
const totalHeight = totalRows * rowHeight;

const tableContainer = document.getElementById('tableContainer');
const placeholder = document.getElementById('placeholder');
const rowsContainer = document.getElementById('rowsContainer');

// 初始化占位容器高度
placeholder.style.height = `${totalHeight}px`;

// 渲染指定范围的行
function renderRows(startIndex, endIndex) {
  rowsContainer.innerHTML = '';
  // 确保索引不越界
  const start = Math.max(0, startIndex);
  const end = Math.min(totalRows - 1, endIndex);
  
  for (let i = start; i <= end; i++) {
    const row = document.createElement('div');
    row.className = 'table-row';
    row.textContent = `第 ${i + 1} 行数据`;
    rowsContainer.appendChild(row);
  }
  
  // 调整渲染容器的top位置，对齐视口
  rowsContainer.style.top = `${start * rowHeight}px`;
}

// 监听滚动事件（加防抖避免频繁渲染）
let debounceTimer;
tableContainer.addEventListener('scroll', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    const scrollTop = tableContainer.scrollTop;
    // 计算当前可见的起始行索引
    const startIndex = Math.floor(scrollTop / rowHeight) - bufferRows;
    // 计算结束行索引
    const endIndex = startIndex + visibleRows + bufferRows * 2;
    
    renderRows(startIndex, endIndex);
  }, 16); // 约60fps频率
});

// 初始渲染前15行
renderRows(0, visibleRows - 1);

优化建议 #

• 如果行高度不固定，先预计算所有行的高度并存储，滚动时根据累计高度计算可见范围。
• 带表头的表格，可将表头固定在顶部（用CSS sticky 定位或监听滚动同步位置）。
• 用DocumentFragment批量插入行，减少DOM操作次数，提升性能。

内容的提问来源于stack exchange，提问作者Aeroxer Support