虚拟滚动是只渲染当前视口内元素的技术：用占位层撑起总高度、计算可视区域索引、通过transform定位避免重排；适用于500+条固定高度数据的滚动场景。
虚拟滚动就是“只画你正看着的那一截”
想象你在看一幅100米长的卷轴画，传统方式是把整幅画全铺开——结果房间根本装不下，还容易弄乱。虚拟滚动的做法是：只在眼前1米宽的窗口里展开画布，你往哪边挪，窗口就跟着滑过去，实时换上新画面。页面里永远只存在20–30个DOM元素，不管数据有1千条还是10万条。
它靠三个关键动作配合运转
不是靠魔法，而是有明确分工：
- 造一个“假高度”的占位层：用一个空div撑起整个列表应有的总高度（比如10万条 × 每条50px = 500万px），这样滚动条能正常显示、拖动位置也准；
- 算出“此刻该画哪几条”：根据容器滚动距离（scrollTop）、每项固定高度（itemHeight），快速算出当前视口内应该显示的起始索引和结束索引；
- 用transform精准贴图：渲染出来的每个
- 都不用设top值，而是统一用transform: translateY(XXXpx)定位，避免触发浏览器重排（Reflow），滚动更顺。
什么时候该上虚拟滚动？别硬套
它不是万能膏药，适合这些情况：
- 列表项数量超过500条，且用户明显感到卡顿或内存占用飙升；
- 每项高度基本固定（比如聊天气泡、商品卡片、日志行）；
- 滚动是主要交互方式，不是点开才加载详情那种场景。
如果只有几十条数据，或者每项高度差异极大（比如图文混排+折叠展开），那不如先用分批渲染或懒加载更简单可靠。
框架里怎么快速用起来？
不用从零手写，主流方案都很成熟：
- Vue项目：推荐vue-virtual-scroller或RecycleScroller（高度固定时性能更稳）；
- React项目：react-window轻量高效，react-virtualized功能更全；
- 原生JS：监听scroll事件 + requestAnimationFrame节流 + 动态innerHTML替换，适合学习原理或极简需求。
核心逻辑没变：滚动时算位置、清旧内容、塞新内容、用transform摆好——框架只是帮你把这三步封装得更稳、边界处理得更细。
