AG-Grid水平滚动时详情单元格固定异常求解决方案

• 修正详情区域的CSS样式
  AG-Grid默认的详情行容器可能未继承主网格的滚动上下文，通过以下CSS强制让详情区域宽度与主网格匹配，跟随水平滚动：

  .ag-details-row {
    position: relative;
    width: 100%;
  }
  .ag-details-cell {
    width: 100%;
    min-width: calc(var(--ag-column-group-header-width, 0) + var(--ag-column-header-width, 0));
  }
  

  如果自定义了详情内容容器，也要确保其宽度设置为100%，避免固定宽度导致无法跟随滚动。

• 通过API动态同步详情区域宽度
  在配置详情单元格渲染器时，动态获取主网格的总列宽，赋值给详情区域：

  gridOptions = {
    // 其他配置
    detailCellRendererParams: {
      getDetailRowData: function(params) {
        params.successCallback(params.data.details);
      },
      detailGridOptions: {
        onFirstDataRendered: function(detailParams) {
          // 获取主网格总列宽
          const totalWidth = detailParams.api.getColumnDefs().reduce((sum, col) => sum + col.width, 0);
          detailParams.api.setGridWidth(totalWidth);
        }
      }
    }
  };
  

  该方法确保详情网格的宽度与主网格完全一致，水平滚动时自然同步移动。

• 监听滚动事件同步偏移
  如果上述方法无效，可直接监听主网格的水平滚动事件，手动调整详情区域的位置：

  gridOptions.onBodyScroll = function(params) {
    document.querySelectorAll('.ag-details-row').forEach(row => {
      row.style.transform = `translateX(-${params.left}px)`;
    });
  };
  

  通过transform属性让详情区域跟随主网格的水平滚动偏移量移动，实现同步效果。

内容的提问来源于stack exchange，提问作者sheep14