原生 table 无法直接做横向虚拟滚动，因其渲染模型强制完整生成所有列 DOM；可行方案是用 div 模拟表格，监听 scrollLeft 动态渲染可视列，需固定列宽、requestAnimationFrame 节流、表头内容区滚动同步，并注意 Safari 兼容性与 colspan 限制。
为什么原生 table 无法直接做横向虚拟滚动
浏览器对 table 元素的渲染是整体布局行为：哪怕只显示 3 列，tr 和 td 仍会按全部列宽计算、生成完整 DOM。横向滚动时，所有列都保留在内存里，卡顿和内存占用直接随列数线性增长。虚拟滚动的本质是“只渲染可视区域+少量缓冲区”，而 table 的 display: table 渲染模型不支持局部截断或动态替换 td —— 所以不能靠 CSS 或属性开关“开启”横向虚拟滚动。
scrollLeft + 动态列渲染是最可行的落地方式
绕过 table 布局限制，用 div 模拟表格结构，配合监听容器的 scrollLeft 值，实时计算当前可视列范围并重绘列内容。关键点在于列宽必须固定（或预知），否则无法精准定位起始列索引。
- 列宽统一设为
120px，容器宽度600px→ 最多显示 5 列，缓冲区加 ±2 列 → 渲染列索引范围为[startCol - 2, startCol + 6] - 用
getBoundingClientRect()或列宽数组累加计算每列左偏移，比纯scrollLeft / colWidth更准（尤其存在边框、padding 时） - 避免在
scroll事件中直接操作 DOM，改用requestAnimationFrame节流，否则快速拖拽时列闪烁明显 - 表头需与内容区独立滚动但同步
scrollLeft，否则错位；推荐用pointer-events: none禁用表头滚动，只响应内容区滚动事件
React 场景下用 useMemo 和 ref 控制列渲染边界
若用 React 实现，不要把列数组整个传给子组件再 filter；应在父组件用 useMemo 提前算好当前应渲染的列片段，再透传过去。同时用 ref 缓存列宽数组和滚动容器，避免每次 render 都重复测量。
const visibleCols = useMemo(() => {
const start = Math.max(0, Math.floor(scrollLeft / COL_WIDTH) - 2);
const end = Math.min(data.columns.length, start + 7);
return data.columns.slice(start, end);
}, [scrollLeft, data.columns]);
注意：如果列宽不等，得维护一个 colWidths: number[] 数组，并用 findIndex 查找 scrollLeft 落在哪一段区间，不能简单除法。
容易被忽略的兼容性陷阱
横向虚拟滚动在 Safari 上表现最差：它对 scrollLeft 的触发频率低、且 requestAnimationFrame 在非活跃 tab 中可能被节流，导致滚动卡顿或列“跳帧”。另外，当用户用 trackpad 快速滑动时，scroll 事件可能批量触发但 scrollLeft 值未及时更新，需要加防抖或用 scrollend（目前仅 Chrome/Edge 支持）兜底。
还有个硬伤：所有方案都无法完美支持 colspan —— 因为跨列单元格必须横跨多个逻辑列，一旦列被虚拟掉，就无法判断其是否该显示。真有 colspan 需求，只能降级为全量渲染，或提前将跨列结构扁平化为普通列+空占位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
