Ag-Grid开启autoheight后固定表头加padding容器出现滚动错位问题

问题原因 #

给配置了domLayout: 'autoheight'的Ag-Grid外层添加带2rem padding的容器后，表格主体的水平滚动区域是容器扣除padding后的内部区域，但设置position: fixed的表头是基于视口定位的，水平滚动时无法同步容器padding带来的偏移量，导致表头与表格主体错位。

解决方案 #

方法一：动态同步表头偏移量

通过监听滚动和窗口 resize 事件，计算容器padding与表格滚动距离，实时调整表头的left属性，确保和主体对齐：

1. 在组件中添加逻辑（以Angular为例）：

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('agGrid') agGrid!: AgGridAngular;
  private headerEl!: HTMLElement;
  private containerEl!: HTMLElement;

  ngAfterViewInit() {
    this.headerEl = document.querySelector('.ag-header') as HTMLElement;
    this.containerEl = document.querySelector('.grid-container') as HTMLElement;
    
    this.syncHeaderPosition();
    // 监听表格水平滚动
    this.agGrid.api.addEventListener('bodyScroll', this.syncHeaderPosition.bind(this));
    // 监听窗口尺寸变化
    window.addEventListener('resize', this.syncHeaderPosition.bind(this));
  }

  private syncHeaderPosition() {
    if (!this.headerEl || !this.containerEl) return;
    const containerPaddingLeft = parseInt(getComputedStyle(this.containerEl).paddingLeft);
    const tableScrollLeft = this.agGrid.api.getHorizontalPixelScrolled();
    this.headerEl.style.left = `${containerPaddingLeft - tableScrollLeft}px`;
  }
}

2. 调整CSS样式：

.ag-header {
  position: fixed;
  top: 0;
  z-index: 10;
}

.grid-container {
  padding: 2rem;
  /* 预留表头高度，避免表格内容被遮挡 */
  padding-top: calc(2rem + 50px); /* 50px为表头预估高度，可根据实际调整 */
}

方法二：使用sticky定位替代fixed

若只需表头在容器内滚动时固定，可改用position: sticky，它会基于容器定位，自动适配padding：

.ag-header {
  position: sticky;
  top: 2rem; /* 匹配容器的padding-top，避免表头被容器内边距遮挡 */
  z-index: 10;
}

.grid-container {
  padding: 2rem;
  overflow: auto;
  max-height: 80vh; /* 设置容器最大高度，触发滚动 */
}

此方法无需额外JS逻辑，更简洁，但需确保容器的滚动上下文正常生效。

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