如何移除AG Grid固定顶部行中的垂直滚动条

问题场景 #

使用AG Grid展示数据并添加固定顶部行后，垂直滚动条会覆盖固定行，期望滚动条仅出现在主数据行区域，不包含表头和固定行。之前尝试的SCSS样式未生效。

有效解决方案 #

使用以下SCSS代码强制隔离滚动区域：

// 完全禁用固定顶部行区域的滚动并隐藏滚动条
.ag-floating-top-container {
  .ag-body-viewport {
    overflow-y: hidden !important;
  }

  .ag-body-vertical-scroll {
    display: none !important;
  }

  .ag-force-vertical-scroll {
    display: none !important;
  }
}

// 指定主数据区域单独拥有垂直滚动
.ag-center-cols-container {
  overflow-y: auto !important;
}

关键说明 #

1. 优先级覆盖：AG Grid会给元素添加高优先级的内联样式或类，因此需要用!important强制覆盖原有规则，确保自定义样式生效。
2. 精准选择DOM：之前的样式选择器层级不够精准，直接针对ag-floating-top-container下的滚动相关子元素设置，才能准确禁用固定行区域的滚动。
3. 独立滚动区域：通过ag-center-cols-container指定主数据行的垂直滚动，确保滚动行为仅局限在主数据区域，不会影响表头和固定顶部行。

额外配置检查 #

确保AG Grid的配置中正确启用了固定顶部行：

const gridOptions = {
  floatingTopRowData: [/* 你的固定顶部行数据 */],
  // 其他表格配置项
};

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