Ag 网格不显示滚动条

Question

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

我的Angular项目（版本10.2，Ag Grid版本24.1）中有一个简单的Ag Grid，没什么特别的，只是为了显示non-editable数据（注意：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。!important 是覆盖内联样式所必需的。) 或使用 alwaysShowVerticalScroll: true.

等设置

在我的项目中，我使用 Bootstrap 并且我有一个经典的结构（header，左侧菜单栏，内容）。我猜是某种样式破坏了 Ag Grid 滚动条系统，但我无法找到发生了什么。

有人可以告诉我我可以检查什么来解决这个问题吗？我在 styles.css 中搜索任何“溢出”，但没有成功。

Answer 1

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

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

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

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

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

删除它后，卷轴按预期工作。

Ag 网格不显示滚动条

Ag grid not showing scrollbars

scrollbar

ag-grid

angular