Ag 网格不显示滚动条答案

【问题标题】：Ag grid not showing scrollbarsAg 网格不显示滚动条
【发布时间】：2021-03-01 12:23:08
【问题描述】：

经过几个小时的研究，我仍然无法解决这个奇怪的问题。

我的 Angular 项目中有一个简单的 Ag Grid（版本 10.2，Ag Grid 版本 24.1），没什么特别的，只是为了显示不可编辑的数据（注意：rowData 不是异步的，因为我手动设置了数据）：

<div>
  <ag-grid-angular
    #agGrid
    id="grid"
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [gridOptions]="gridOptions"
  ></ag-grid-angular>
</div>

网格选项是：

    this.gridOptions = {
        defaultColDef: {
          sortable: true,
          resizable: true,
          editable: true,
          suppressMenu: true,
          filter: true,
          floatingFilter: true,
          filterParams: { buttons: ['clear'] }
        },
        headerHeight: 60,
        animateRows: true,
        pagination: false,
        paginationAutoPageSize: false,
    }

如果我在新项目中使用它，滚动条会完美显示，没有问题。

但是，如果我在当前项目中使用它，则根本不会显示任何条形，如果我使用文档中的说明强制它也没关系（覆盖 .ag-body-viewport 的溢出以滚动！重要的。!important 是覆盖内联样式所必需的。) 或像 alwaysShowVerticalScroll: true 这样的设置。

在我的项目中，我使用的是 Bootstrap，我有一个经典的结构（标题、左侧菜单栏、内容）。我猜测某些样式正在破坏 Ag Grid 滚动条系统，但我无法找到正在发生的事情。

谁能告诉我我可以检查什么来解决这个问题？我在我的 styles.css 中搜索任何“溢出”，但没有运气。

【问题讨论】：

标签： angular scrollbar ag-grid

【解决方案1】：

好的，请一位 CSS 开发人员告诉我正确的方法。

我将在这里分享这些知识以供将来参考，因为对于非 CSS 开发人员（如我）来说，在哪里可以找到它并不明显。

问题在于所有应用程序都有一个通用样式：

::-webkit-scrollbar {
    width: 0;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

我只搜索“溢出”样式，因为这是我在谷歌上搜索这个问题时的关键。而且它是一个伪类，所以它出现在 Chrome Dev tools Style 的底部。

移除后，卷轴按预期工作。

【讨论】：