虚拟滚动如何实现高度自适应？解决 Item 动态撑开导致的滚动条跳动

虚拟滚动实现高度自适应的核心是动态测量与缓存：每个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}"> 占位当某 item 内容变化（如图片加载完成、展开详情），触发重新测量并更新缓存，同时通知虚拟滚动器刷新对应位置的占位高度监听内容变化，及时触发重测量与位置修正Item 动态撑开（比如异步图片加载、富文本渲染、折叠面板展开）必须被感知，否则缓存高度失效，导致下方内容上移、滚动条突跳：对 img 标签监听 load 事件；对富文本容器可用 MutationObserver 监听子节点变化使用 ResizeObserver 监听 item 容器尺寸变化（兼容性需考虑，但现代浏览器已广泛支持）测量更新后，不仅要改缓存，还要调用 scrollTo({ top: currentScrollTop }) 或触发一次“平滑重置”，防止视觉跳变滚动位置映射要基于累计真实高度计算滚动条总高度 = 所有 item 缓存高度之和；当前可视起始索引和偏移量，必须由从头累加高度来定位，不能靠 index × avgHeight 估算： Julius AI Julius AI是一款功能强大的AI数据分析工具，可以快速分析和可视化复杂数据。