Ag Grid v32 domLayout为autoHeight时垂直滚动条可用但不可见求助

问题背景 #

从Ag Grid v28升级到v32后，设置domLayout: 'autoHeight'并自定义.ag-body-viewport样式：

.ag-body-viewport {
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
}

垂直滚动功能正常，但滚动条不可见；添加scrollbar-width: thin !important;仅能显示细滚动条，需恢复v28原有显示效果。

修复步骤 #

1. 显式还原滚动条样式 #

Ag Grid v30+对滚动容器的默认样式做了调整，需针对不同浏览器显式覆盖，匹配v28时期的效果：

/* WebKit内核浏览器（Chrome、Edge） */
.ag-body-viewport::-webkit-scrollbar {
  width: 10px; /* 调整为v28时期的滚动条宽度 */
}
.ag-body-viewport::-webkit-scrollbar-track {
  background: #f1f1f1; /* 匹配原有轨道背景色 */
}
.ag-body-viewport::-webkit-scrollbar-thumb {
  background: #888; /* 匹配原有滑块颜色 */
}
.ag-body-viewport::-webkit-scrollbar-thumb:hover {
  background: #555; /* hover状态颜色 */
}

/* Firefox浏览器 */
.ag-body-viewport {
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: auto; /* 恢复默认宽度，替代thin */
  scrollbar-color: #888 #f1f1f1; /* 滑块颜色 轨道颜色 */
}

2. 排查父容器样式冲突 #

确认.ag-body-wrapper（.ag-body-viewport的父容器）未被设置overflow: hidden，否则会遮挡滚动条：

.ag-body-wrapper {
  overflow: visible !important;
}

3. 验证配置一致性 #

确保gridOptions中domLayout: 'autoHeight'未被其他配置覆盖，避免同时设置全局height/maxHeight属性与自定义的.ag-body-viewport高度冲突。

内容的提问来源于stack exchange，提问作者Sudeep K S