虚拟滚动列表高度计算不准确怎么办？

Newb.文鑫提问于 2026-03-25 15:18:24 阅读 4

交互

我在用原生 JS 实现虚拟滚动时，发现可视区域的 item 高度算不准，导致滚动时内容错位或者空白。每个 item 的高度是动态的（比如文本长度不同），我尝试用 getBoundingClientRect() 去实时获取，但性能很差还闪屏。

现在我缓存了每个 item 的高度，但首次渲染还是对不齐。有没有更靠谱的方案？比如能不能只测量可视区域内的元素？下面是我现在的 render 逻辑：

function render() {
  const start = Math.floor(scrollTop / itemHeight);
  const end = start + visibleCount;
  container.innerHTML = '';
  for (let i = start; i < end; i++) {
    const el = document.createElement('div');
    el.textContent = items[i];
    el.style.height = cachedHeights[i] + 'px';
    container.appendChild(el);
  }
  container.style.transform = translateY(${cachedHeights.slice(0, start).reduce((a, b) => a + b, 0)}px);
}

我来解答赞 8 收藏

反馈

暂无解答