虚拟滚动实现高度自适应的核心是动态测量与缓存：每个item首次渲染时用getBoundingClientRect或offsetHeight获取真实高度并存入映射表，滚动时仅渲染可视区及缓冲项，其余用对应缓存高度占位；内容变化时通过load、MutationObserver或ResizeObserver触发重测量与缓存更新，并重建前缀和数组以精准定位滚动位置，辅以节流与安全占位保障体验稳定。
虚拟滚动实现高度自适应，核心在于不依赖固定行高、不硬编码 item 高度，而是让每个 item 真实渲染后主动上报自身高度，并动态维护一个“高度映射表”（height cache）和滚动位置映射关系。这样既能支持文字换行、图片加载、折叠展开等导致的动态撑开，又能避免因预估不准引发的滚动条跳动。
用真实测量 + 缓存机制替代固定高度
不要为所有 item 设置统一 height，而是：
- 首次渲染 item 时，用
ref+getBoundingClientRect().height或offsetHeight获取真实高度 - 将该高度存入 Map 或数组缓存（key 可为 index 或唯一 id），后续复用
- 滚动过程中，只渲染可视区域前后若干项（如 ±5 条），其余用占位
<div style="height: ${cachedHeight}"> 占位<li>当某 item 内容变化（如图片加载完成、展开详情），触发重新测量并更新缓存，同时通知虚拟滚动器刷新对应位置的占位高度</li> <h3>监听内容变化，及时触发重测量与位置修正</h3> <p>Item 动态撑开（比如异步图片加载、富文本渲染、折叠面板展开）必须被感知，否则缓存高度失效，导致下方内容上移、滚动条突跳：</p> <ul> <li>对 img 标签监听 <code>load事件；对富文本容器可用MutationObserver监听子节点变化 - 使用
ResizeObserver监听 item 容器尺寸变化（兼容性需考虑，但现代浏览器已广泛支持） - 测量更新后，不仅要改缓存，还要调用
scrollTo({ top: currentScrollTop })或触发一次“平滑重置”，防止视觉跳变
滚动位置映射要基于累计真实高度计算
滚动条总高度 = 所有 item 缓存高度之和；当前可视起始索引和偏移量，必须由从头累加高度来定位，不能靠 index × avgHeight 估算：
- 维护一个前缀和数组
heightsAccumulated[i]：表示前 i 项总高度 - 根据
scrollTop二分查找找到第一个满足heightsAccumulated[i] > scrollTop的 index，即为可视区起始项 - 可视区顶部到该 item 顶部的偏移 =
scrollTop - heightsAccumulated[index - 1] - 每次缓存更新后，需重建前缀和数组（或增量更新），确保映射准确
预留“安全缓冲区”降低重绘频率
完全实时响应每次高度变化可能引发高频重排，可适度节流与合并：
- 对同一 item 的多次高度变更，用
requestIdleCallback或防抖（30–50ms）延迟合并处理 - 渲染时多渲染 2–3 行“缓冲区”，避免快速滚动时因测量延迟出现空白
- 初始加载阶段若高度未就绪，先按最小安全高度（如 40px）占位，再异步补全，比留白更稳定
关键不在“滚动快”，而在“高度准”。只要缓存可信、测量及时、映射严谨，哪怕每行高度都不同，也能稳住滚动体验。
