高性能虚拟滚动的核心是构建可预测、低开销、与滚动位置强绑定的坐标映射系统，关键在于预建行列累积尺寸表并用二分查找实现O(log n)定位，结合transform偏移渲染，避免回流。
直接用 scrollLeft 和 scrollTop 实现高性能虚拟滚动，核心不是“监听然后渲染”，而是构建一套可预测、低开销、与滚动位置强绑定的坐标映射系统。关键在于：不依赖 DOM 遍历，不频繁重排，所有可视计算在 O(log n) 内完成。
一、滚动容器必须满足的基础条件
虚拟滚动的前提是容器本身支持原生滚动，并能准确反馈位置。需确保：
- 容器设置了明确的
width和height，且overflow: auto（或scroll） - 内部内容高度/宽度由 JS 精确控制（例如用
transform: translateY()或占位div.infinite-list-phantom撑开），不能靠子元素自然流式撑高，否则scrollHeight不稳定 - 禁用默认滚动条干扰（如通过
scrollbar-width: none或自定义覆盖层），避免视觉与逻辑错位 - 为
scroll事件添加节流（推荐 60fps 下限，即 ~16ms 间隔），防止高频抖动触发冗余计算
二、建立行列位置映射表（关键性能基石）
不等高/不等宽场景下，无法用简单除法算行列索引。必须预建累积尺寸表：
- 对每行记录
{ top: number, height: number }，形成数组rowPositions: [{top: 0, height: 32}, {top: 32, height: 28}, ...] - 对每列同理构建
colPositions - 该表只需初始化一次，后续通过 二分查找 定位：
scrollTop落在哪一段top ≤ scrollTop 区间内 - 示例函数：
getStartRow(scrollTop)返回最靠近顶部的可见行索引，时间复杂度 O(log n)，百万行查定位仅需约 20 次比较
三、动态计算可见区域并截取数据
每次滚动后，基于当前位置和视口尺寸，快速得出要渲染的最小数据切片：
- 起始行 =
getStartRow(scrollTop) - 结束行 =
getEndRow(scrollTop + clientHeight)（getEndRow同样用二分查最后一个top ≤ scrollTop + clientHeight的行） - 添加缓冲区：实际渲染范围扩展为
[startRow - buffer, endRow + buffer]（buffer 常取 5–15 行），避免滚动中白屏或闪烁 - 列方向同理处理
scrollLeft和clientWidth，尤其在冻结列场景下，左右缓冲需独立计算
四、用 transform 替代真实 DOM 位移
渲染出来的 DOM 元素不能靠 margin-top 或大量空 div 占位，否则会触发回流：
- 外层容器设
position: relative，内层列表设position: absolute; top: 0; left: 0; - 用
transform: translateY(-${rowPositions[startRow].top}px)整体偏移，让首行对齐视口顶部 - 单元格自身不再设置
top，只靠transform统一调度，GPU 加速且无布局影响 - 若需支持不等高，每行单独加
transform: translateY(${rowPositions[i].top - rowPositions[startRow].top}px)，仍保持绝对定位零回流
不复杂但容易忽略：scrollLeft 和 scrollTop 是入口，真正决定性能的是背后那张静态映射表和每次只操作几十个 DOM 节点的克制逻辑。
