使用react-virtual模块实现固定行列时首列样式失效如何解决？

问题原因 #

首先明确：react-virtual本身没有内置固定列/固定行的封装能力，但完全支持通过自定义逻辑实现该效果，你当前写法样式异常是以下几个错误导致的：

• 定位逻辑冲突：position: sticky 和原有 position: absolute + transform: translateX 位移逻辑互斥，sticky定位依赖滚动容器的滚动偏移计算位置，transform属性会改变定位上下文，同时absolute会覆盖sticky的定位规则
• 固定列不该参与横向虚拟计算：你把固定列放到columnVirtualizer的遍历逻辑中，会被自动加上横向位移的transform值，直接破坏sticky的定位效果
• 父级容器约束：你当前的单元格直接父级设置了position: relative，也会导致sticky元素相对于该父级而非滚动容器定位，无法实现跟随滚动固定的效果

修复方案 #

按照以下逻辑调整即可实现首列固定：

1. 将固定列从通用列虚拟器中拆分，单独渲染，仅对非固定列（columns.slice(1)）做横向虚拟计算
2. 固定列删除原有position: absolute、transform属性，仅保留position: sticky、left: 0，额外加z-index: 10避免被其他列遮挡，纵向位置通过virtualRow.start对齐即可
3. 给非固定列的渲染区域加左侧margin，值等于首列宽度，避免内容被固定列遮挡

核心修改后的代码示例 #

const VirtualTable = <T,>({ columns, data }: ITableProps<T>) => {
  const parentRef = React.useRef<HTMLDivElement | null>(null);
  // 固定列宽度，可根据实际需求配置
  const STICKY_COL_WIDTH = 100;

  const rowVirtualizer = useVirtual({
    size: data.length,
    parentRef,
    estimateSize: React.useCallback(() => 50, []),
    overscan: 5,
  });

  // 横向虚拟器仅处理非固定列
  const columnVirtualizer = useVirtual({
    horizontal: true,
    size: columns.length - 1, // 排除首列固定列
    parentRef,
    estimateSize: React.useCallback(() => 100, []),
    overscan: 5,
  });

  return (
    <div
      ref={parentRef}
      className="List"
      style={{
        height: `calc(100vh - ${shapes.headerHight}px)`,
        width: `100%`,
        overflow: "auto",
      }}
    >
      <div
        style={{
          height: `${rowVirtualizer.totalSize}px`,
          width: `${STICKY_COL_WIDTH + columnVirtualizer.totalSize}px`,
          position: "relative",
        }}
      >
        {rowVirtualizer.virtualItems.map((virtualRow) => (
          <React.Fragment key={virtualRow.index}>
            {/* 单独渲染固定首列 */}
            <div
              style={{
                position: "sticky",
                left: 0,
                top: 0,
                zIndex: 10,
                width: `${STICKY_COL_WIDTH}px`,
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
                background: "#fff", // 加背景避免透字
              }}
            >
              Cell {virtualRow.index}, 0
            </div>
            {/* 渲染非固定列 */}
            {columnVirtualizer.virtualItems.map((virtualColumn) => {
              const actualColumnIndex = virtualColumn.index + 1;
              return (
                <div
                  key={virtualColumn.index}
                  style={{
                    position: "absolute",
                    top: 0,
                    left: STICKY_COL_WIDTH, // 从固定列右侧开始排版
                    width: `${virtualColumn.size}px`,
                    height: `${virtualRow.size}px`,
                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
                  }}
                >
                  Cell {virtualRow.index}, {actualColumnIndex}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
};

如果需要实现固定行，逻辑完全一致：把要固定的行从行虚拟器中拆分，单独设置position: sticky、top: 0即可。

内容的提问来源于stack exchange，提问作者Mohammad K.