万行级表格虚拟滚动深度话题

// 虚拟滚动的三个核心计算
const visibleCount = 20           // 可视区能显示几行(容器高 / 行高)
const bufferCount = 5             // 上下缓冲行数,防止滚动时白屏
const rowHeight = 40              // 每行固定高度(px)
const total = allData.length         // 总行数 30000

// 滚动时根据 scrollTop 算出该渲染哪几行
function onScroll(scrollTop) {
  // 1. 当前可视区起始索引
  const startIndex = Math.floor(scrollTop / rowHeight) - bufferCount
  const safeStart = Math.max(0, startIndex)

  // 2. 结束索引
  const endIndex = safeStart + visibleCount + bufferCount * 2

  // 3. 只 slice 这一段数据渲染
  const visibleData = allData.slice(safeStart, endIndex)

  // 4. 用 translateY 把这几行推到正确位置
  const offsetY = safeStart * rowHeight
  content.style.transform = `translateY(${offsetY}px)`
}

// 5. 容器的总高度要撑开,让滚动条长度正确
// 用一个占位 div:height = total * rowHeight
spacer.style.height = (total * rowHeight) + 'px'

测评数据需要逐行编辑、下拉选择、校验。这里的坑: