如何始终在 ag-grid 中显示水平滚动条？答案

【问题标题】：How to always show the horizontal scroll bar in ag-grid?如何始终在 ag-grid 中显示水平滚动条？
【发布时间】：2021-08-27 11:55:02
【问题描述】：

是否可以始终在ag-grid 中显示水平滚动条？这个问题被问到an issue on their GitHub page，但他们似乎忽略了它（我可以说，它不是在their own issue tracker 中创建的）。

我对官方解决方案、CSS hack 以及任何真正有效的东西持开放态度。

【问题讨论】：

标签： ag-grid ag-grid-react

【解决方案1】：

同样涵盖 macOS/WwebKit 浏览器的解决方案

.ag-body-viewport-wrapper.ag-layout-normal {
  overflow-x: scroll;
  overflow-y: scroll;
}
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(255,255,255,.5);
}

您还需要将 ag-Grid 上的属性 'scrollbarWidth' 设置为上面的宽度/高度数值

scrollbarWidth=8

这样，当您的行数超出屏幕大小时，最后一行不会被滚动条遮挡。当您在 ag-Grid 中有摘要行时，可能会发生这种情况。

工作 Plunker demo.

感谢 @Parotish 提供我修改的基本 plunker 演示。

【讨论】：

嘿，谢谢！快速的事情：滚动条确实显示，但在网格垂直调整行大小后消失（通过我在onGridReady 回调中调用的setTimeout(() => { this.gridApi.resetRowHeights(); }, 500);。知道该怎么做吗？
另一件事：您的示例也始终显示垂直滚动条。即使删除 overflow-y: scroll; 它仍然存在。有没有办法删除它只显示水平滚动条？
omg 从昨天开始，我一直在尝试让滚动条显示 - 但对于冻结的列，它非常棘手，我发现它无法显示。今天我尝试了一个新的搜索并发现了这个 - 它工作得非常好 - 非常感谢！谷歌可能有很多答案，但我们必须提出正确的问题:)

【解决方案2】：

你可以通过 CSS 设置它

.ag-body-viewport-wrapper.ag-layout-normal {
  overflow-x: scroll;
}

如需现场示例，请参考Plunk

尝试从列菜单中删除列，您会看到滚动条仍然显示出来。

【讨论】：

您获得了 ag-grid 的批准印章 ;)
哈哈！如果可以简单实现，为什么要把事情复杂化。
感谢您的回复。在 Chrome 或 Safari 中加载 Plunk 时，我看不到水平滚动条。我手动尝试在行周围的 DOM 中的每个 div 上设置 overflow-x: scroll，但似乎都不起作用。明确一点：我希望滚动条即使在用户不滚动时也能显示出来。
你检查了我提供的 plunk 吗？我为 chrome 创建了那个。迄今为止的最新版本。提供屏幕截图或 gif 或详细说明。
我在 Mac ibb.co/c9fnvf 和 Safari v12 ibb.co/grt7vf 上使用 Chrome v70。这对任何一个都不起作用（参见图片）。