虚拟滚动通过“双层滚动容器+列分离渲染”实现固定列：分左/中/右三区域，各自虚拟滚动并同步纵横向滚动；固定列不横向滚动，中间区负责横向滚动并补偿位移；需统一行高、唯一key、懒加载及预处理数据。
虚拟滚动本身不直接支持固定列，但可以通过“双层滚动容器 + 列分离渲染”实现高性能的固定列表格。核心思路是：将固定列和非固定列拆成两个独立的 <div> 容器，各自做虚拟滚动，再通过同步横向滚动、对齐表头/行高、共享滚动状态来保持视觉一致性。
<h3>固定列的结构拆分策略</h3>
<p>把表格逻辑上分为三部分：左侧固定列区域、中间可滚动内容区、右侧固定列区域（如需）。每部分都独立维护自己的数据切片和渲染范围：</p>
<ul>
<li>左侧固定列只渲染所有行的固定字段（如序号、操作列），高度随总行数变化，但宽度固定且不参与横向滚动</li>
<li>中间区域按可视区域计算起始索引，仅渲染当前屏幕内的行片段，并监听横向滚动以更新其 <code>transformX 偏移
grid-template-rows 或统一 line-height + box-sizing: border-box 控制滚动同步与对齐关键点
三个区域必须保持纵向滚动完全同步，横向滚动仅影响中间区域，但左右固定列需响应其位移做反向补偿：
- 监听中间容器的
scrollLeft，动态设置左右固定列的transform: translateX(...)来抵消视觉偏移 - 纵向滚动统一由中间容器触发，通过
scrollTop同步赋值给左右容器（注意避免循环触发） - 表头固定列需与内容列一一对应，建议用
data-key或index显式绑定列关系，避免因排序/筛选导致错位
复杂数据下的性能加固技巧
当单元格含图片、开关、多级嵌套组件时，需叠加轻量级优化手段：
- 对非首屏单元格使用
IntersectionObserver懒加载内容，比如延迟渲染图片或展开按钮 - 固定列中高频交互元素（如切换开关）应使用原生
<input type="checkbox">，避免 React/Vue 的完整组件挂载开销 - 为每行生成唯一
key，且 key 不依赖动态计算属性（如Math.random()），推荐用数据 ID + 列 ID 组合 - 避免在 render 函数中执行过滤、格式化等耗时逻辑，提前在数据层完成预处理并缓存结果
推荐技术组合与避坑提醒
不建议从零手写整套逻辑。优先基于成熟方案扩展：
- 避开 react-window 的默认 Table 示例 —— 它不支持固定列，强行 patch 容易破坏滚动精度
- 可基于 react-virtual 自定义
useVirtual行数据 + 手动管理列容器，灵活性高且体积小（~3KB） - 若用 Vue，vue-virtual-scroller 的
DynamicScroller支持 slot 分区，适合拆分固定/滚动列 - 务必禁用固定列区域的
overflow: auto，否则会出现双滚动条；所有滚动行为应由主容器统一接管
