Chrome/Edge中ag-grid横向滚动条不随内容移动问题求助

问题描述 #

使用AG Grid创建的数据表格，在Chrome和Edge浏览器中点击横向滚动条的左右滑块时，仅滚动条本身移动，表格内容未同步滚动，尝试过多种CSS样式和浏览器专属代码均无效，需要实现滚动条与表格内容的同步滚动。

解决步骤 #

1. 为Grid容器设置明确宽度 #

原代码中Grid容器仅设置了高度，未限制宽度，当容器宽度足够容纳所有列时，AG Grid的横向滚动绑定可能异常。给容器添加固定宽度或最大宽度，强制触发横向滚动的正确关联：

<div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 800px;"></div>

也可使用百分比宽度配合max-width适配不同屏幕：

<div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 90%; max-width: 1000px;"></div>

2. 检查并修正Grid配置项 #

确保Grid配置中没有干扰滚动的设置：

• 移除或设置suppressHorizontalScroll: false（默认即为false，无需额外设置，若之前手动开启需关闭）
• 确认使用默认的clientSide行模型（AG Grid默认配置，若修改过需恢复）：

  const gridOptions = {
    // ...其他配置
    rowModelType: 'clientSide'
  };
  

3. 调整样式与脚本加载顺序 #

原代码中先加载无样式的JS再加载CSS，可调整为先加载CSS再加载JS，确保样式正确应用到Grid元素：

<!-- 先加载AG Grid样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
<!-- 再加载AG Grid脚本 -->
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

4. 手动绑定滚动事件（临时补救方案） #

若以上方法无效，可手动监听滚动条事件，同步表格内容的滚动位置：

// Grid初始化后添加以下代码
const gridViewport = document.querySelector('.ag-body-horizontal-scroll-viewport');
const scrollBar = document.querySelector('.ag-body-horizontal-scroll');

if (scrollBar && gridViewport) {
  scrollBar.addEventListener('scroll', (e) => {
    gridViewport.scrollLeft = e.target.scrollLeft;
  });
}

5. 排除浏览器缓存问题 #

清除浏览器缓存或使用无痕模式重新加载页面，避免旧样式/脚本导致的异常。

修改后的完整示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Data Grid</title>
  <!-- 先加载样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
  <!-- 再加载脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
</head>
<body>
  <!-- 添加固定宽度 -->
  <div id="myGrid" class="ag-theme-alpine" style="height: 500px; width: 800px;"></div>
  <script type="text/javascript">
    const columnDefs = [
      { field: "SerialNo" },
      { field: "Name" },
      { field: "Project" },
      { field: "JoiningDate" },
      { field: "JobRole" },
      { field: "RoleBand" },
      { field: "EmployeeType" },
      { field: "Contact" },
      { field: "ReportingManager" }
    ];

    const rowData = [
      { SerialNo: 1, Name: "A", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 2, Name: "B", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 3, Name: "C", Project: "Del200", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 4, Name: "D", Project: "Del500", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 5, Name: "E", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Associate" , RoleBand: "RB7" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 6, Name: "F", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 7, Name: "G", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 8, Name: "H", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 9, Name: "I", Project: "Del110", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 10, Name: "J", Project: "Del200", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Contract" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 11, Name: "K", Project: "Del100", JoiningDate: "DD-MM-YY" , JobRole: "Developer" , RoleBand: "RB5" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 12, Name: "L", Project: "Del300", JoiningDate: "DD-MM-YY" , JobRole: "Automation" , RoleBand: "RB4" , EmployeeType: "Regular" , Contact: "xxxxxx" , ReportingManager: "xyz" },
      { SerialNo: 13, Name: "M", Project: "Del300", JoiningDate: "DD-MM-YY" , JobRole: "QA" , RoleBand: "RB6" , EmployeeType: "Part-Time" , Contact: "xxxxxx" , ReportingManager: "xyz" },
    ];

    const gridOptions = {
      columnDefs: columnDefs,
      rowData: rowData,
      defaultColDef: {sortable: true, filter: true},
      rowSelection: 'multiple', 
      animateRows: true, 
      onCellClicked: params => {
        alert('cell was clicked', params)
      }
    };

    const eGridDiv = document.getElementById("myGrid");
    new agGrid.Grid(eGridDiv, gridOptions);
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Vishakha Vijay Nimbalkar