如何用HTML模板构建虚拟列表滚动组件

虚拟滚动技术里最容易踩的坑，几乎都出在“想当然”上。先说个核心判断：固定行高，是唯一能让你放心往生产环境部署的起点。别被那些所谓“自动测高”“动态高度支持”的噱头忽悠了——只要行高不固定，Math.floor(scrollTop / itemHeight) 这把钥匙就会直接断在锁孔里。浏览器滚动时每帧都要读 scrollTop，再除以一个随时在变的 itemHeight，结果就是索引错乱、内容跳变，白屏是早晚的事。真实业务中，行高差异超过 ±5px 就足以肉眼感知“跳行”，而反复调用 getBoundingClientRect() 去获取每行真实高度，会触发强制同步布局（layout thrashing），那开销比全量渲染还大。

固定行高：唯一可靠的起点

所以，方案必须预先定死：所有列表项的CSS高度严格一致，比如统一写死 height: 48px 或 line-height: 48px，同时禁用 flex 自适应、min-height、padding 波动这些会让高度“偷偷膨胀”的干扰项。表格场景下更要注意，必须加上 table-layout: fixed 并显式定义列宽，否则单元格内容一撑开，高度瞬间失控。

定位与偏移：最容易翻车的环节

如果你把 position: absolute 的内容区直接放在滚动容器里，而不给外层容器设置 position: relative，那你用 top 或 transform: translateY() 推内容时，偏移量会相对于最近的定位祖先（可能是 body，也可能是某个父级 modal），整个列表飘出视口、滚动条失效、甚至直接一片空白，都是很常见的后果。

另外，虽然 transform: translateY() 在视觉上也能达到类似效果，但在 Chrome 115 到 122 版本中，它会意外触发额外的合成层，导致 GPU 内存暴涨。相比之下，top 更可控，也没有这种副作用。每次更新前还必须清空旧节点：用 contentEl.replaceChildren()（现代浏览器）或 contentEl.innerHTML = ''（兼容 IE11），否则残留的事件监听器、Vue/React 中 key 的冲突、input 焦点丢失等问题，会迅速冒出来。

滚动监听与节流

滚动监听必须加节流。scroll 事件在 Chrome 和 Firefox 中每秒能触发 60 到 120 次，不加限制就意味着每秒执行几十次 DOM 操作。lodash.throttle 虽然可行，但更推荐用 requestAnimationFrame——它天然与屏幕刷新率对齐，而且能保证同一帧内只执行一次计算和渲染。

示例逻辑大致如下：

let isPending = false;
function handleScroll() {
  if (!isPending) {
    isPending = true;
    requestAnimationFrame(() => {
      const scrollTop = container.scrollTop;
      const startIndex = Math.floor(scrollTop / ITEM_HEIGHT) - BUFFER_SIZE;
      const endIndex = Math.min(data.length, startIndex + VISIBLE_COUNT + BUFFER_SIZE * 2);
      renderRange(startIndex, endIndex);
      isPending = false;
    });
  }
}

这里有个容易被忽略的点：缩放页面（比如 Ctrl+/-）之后，clientHeight 和 itemHeight 的实际像素值已经变了，必须重算 VISIBLE_COUNT 和缓冲区参数，否则可视范围就会错位。

撑高容器的正确做法

最后说撑高容器的那个“phantom”元素。很多人以为用 display: none 或 visibility: hidden 就能解决问题——错了。它们只是隐掉视觉，并没有从 DOM 中移除。1 万条数据就意味着 1 万个 div 持久驻留在内存中，浏览器依然要维护样式树、布局树、图层合成信息，重排重绘的开销一分不少。虚拟滚动的核心动作是“不创建”，不是“藏起来”。

正确的做法是用一个空 div 来占满总高度：style="height: ${ITEM_HEIGHT * data.length}px"。这个元素只负责撑开滚动条长度，内部不携带任何子节点。它必须是滚动容器的直接子元素，而且不能设 overflow，否则会截断内容区。

有个很容易忘记的点：这个 phantom 的高度必须实时响应数据长度的变化。列表支持增删时，每次变更后都要同步更新它的 style.height，否则滚动条长度会失准，拖拽错位，到底部时甚至触发不了加载——这种错位在用户体验上是非常致命的。