Angular 18集成Ag-Grid出现同步双滚动条问题求解决方案

问题描述 #

我此前使用过Ag-Grid，首次在Angular 18中集成该组件展示数据时，遇到一个视觉问题：当数据行数超出可视区域，会出现两个同步滚动的重复滚动条，功能不受影响但影响界面美观，想彻底消除。

当前使用的代码如下：

<hr/>
<ag-grid-angular id="dataTbl"
                 style="width: 100%; height: 100%;"
                 class="ag-theme-balham"
                 [rowData]="dgData"
                 [columnDefs]="colHeadData"
                 [defaultColDef]="colDefaults"
                 [animateRows]="true"
                 (rowClicked)="onRowClicked($event)"
                 (gridReady)="onGridReady($event)"
></ag-grid-angular>

已尝试过将组件放入DIV并设置overflow:hidden、移除DIV、用CSS直接控制Ag-Grid滚动条等操作，均无效果。

可行解决方案 #

1. 明确表格高度，避免父容器高度歧义

Ag-Grid设置height:100%时，若父容器未设置明确高度或自身产生溢出，容易触发双重滚动。建议改用固定高度或基于视口的动态高度：

<ag-grid-angular id="dataTbl"
                 style="width: 100%; height: calc(100vh - 150px);" <!-- 根据页面布局调整数值 -->
                 class="ag-theme-balham"
                 ...
></ag-grid-angular>

同时确保父容器没有设置overflow:auto或overflow:scroll。

2. 全局CSS穿透隐藏冗余滚动条

由于Angular 18的视图封装机制，直接写的样式可能无法穿透到Ag-Grid内部。在全局样式文件（如styles.scss）中添加以下代码：

#dataTbl .ag-root-wrapper-body {
  overflow: hidden !important;
}

如果需要全局生效（针对所有Ag-Grid实例），可以去掉#dataTbl选择器。

3. 通过GridReady事件手动修改DOM样式

如果CSS方法无效，可在gridReady回调中直接操作DOM元素：

onGridReady(params: any) {
  const gridBodyWrapper = params.api.getGridElement().querySelector('.ag-root-wrapper-body');
  if (gridBodyWrapper) {
    gridBodyWrapper.style.overflow = 'hidden';
  }
}

4. 检查主题兼容性

ag-theme-balham是较旧的主题，可能与Angular 18存在适配问题。尝试切换到Ag-Grid官方推荐的最新主题（如ag-theme-quartz），同时确保Ag-Grid版本与Angular 18完全兼容（可尝试升级到32.x系列的最新版本）。

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