React中AG Grid如何仅显示非固定列的单一水平滚动条（固定列保持固定无滚动条）

我完全懂你的困扰——AG Grid默认给固定列区域单独生成水平滚动条，明明固定列宽度已经设好不会溢出，这些多余的滚动条看着特别闹心。咱们只需要两步就能搞定：用CSS隐藏固定列的滚动条，再确保配置没毛病，就能只保留中间非固定列的单一滚动条，同时固定列稳稳不动。

解决步骤 #

1. 用CSS隐藏固定列区域的水平滚动条

AG Grid给左侧固定列、右侧固定列分别分配了专属的容器类，我们直接针对这些类设置隐藏水平滚动条即可。同时要确保这些容器不会触发水平滚动（毕竟你已经给固定列设了minWidth，内容不会溢出）。

在你的React组件对应的CSS文件（或者全局CSS）里添加这段样式：

/* 隐藏左侧固定列的水平滚动条及占位空间 */
.ag-pinned-left-cols-container {
  overflow-x: hidden !important;
}
.ag-pinned-left-cols-container::-webkit-scrollbar {
  display: none;
}

/* 隐藏右侧固定列的水平滚动条及占位空间 */
.ag-pinned-right-cols-container {
  overflow-x: hidden !important;
}
.ag-pinned-right-cols-container::-webkit-scrollbar {
  display: none;
}

2. 确认AG Grid配置无冲突

检查你的组件配置，确保这几个关键点没问题：

• 保留domLayout="normal"（你的代码里已经设置了，这是默认布局，不会干扰滚动逻辑）
• 所有固定列都设置了明确的minWidth或width（你已经做到了，这能避免固定列内容溢出触发滚动条）
• 不要开启suppressHorizontalScroll（默认值为false，会保留中间非固定列的滚动条）

修改后的完整组件示例 #

把CSS引入后，你的组件代码不需要大改，保持原有配置即可：

import { useRef } from 'react';
import { Box } from '@mui/material';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
// 引入包含上述滚动条隐藏样式的CSS文件
import './GridScrollFix.css';

const YourGridComponent = () => {
  const gridRef = useRef(null);
  const paginatedData = // 你的表格数据
  const columnDefs = [
    { field: "a", headerName: "A", pinned: "left", minWidth: 50, cellStyle: { textAlign: "center" } },
    { field: "b", headerName: "B", minWidth: 84, pinned: "left" },
    { field: "c", headerName: "C", minWidth: 209, pinned: "left", cellStyle: { fontSize: '14px' } },
    { field: "d", headerName: "D", minWidth: 120, cellStyle: { textAlign: "center" } },
    { field: "e", headerName: "E", minWidth: 240 },
    { field: "f", headerName: "F", minWidth: 95, cellStyle: { textAlign: "center" } },
    { field: "g", headerName: "G", minWidth: 161 },
    { field: "h", headerName: "H", minWidth: 105, cellStyle: { textAlign: "center" } },
    { field: "i", headerName: "I", minWidth: 50, cellStyle: { textAlign: "center" } },
    { field: "j", headerName: "J", minWidth: 100, pinned: "right", cellStyle: { textAlign: "center" } }
  ];

  return (
    <Box className="ag-theme-alpine" sx={{ width: "100%", height: "550px" }}>
      <AgGridReact
        ref={gridRef}
        rowData={paginatedData}
        columnDefs={columnDefs}
        defaultColDef={{
          resizable: true,
          sortable: true,
          filter: true,
          headerClass: "custom-header",
        }}
        pagination={false}
        rowHeight={45}
        domLayout="normal"
      />
    </Box>
  );
};

export default YourGridComponent;

额外注意事项 #

如果你的固定列里有长文本可能溢出，记得给这些列加上cellStyle: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }，这样内容会自动截断显示省略号，不会触发水平滚动，也不会破坏布局。

内容来源于stack exchange