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

Question

是否有可能总是在 ag-grid 中显示水平滚动条？ ？这个问题被问为 an issue on their GitHub page , 但他们似乎忽略了它(据我所知，它不是在 their own issue tracker 中创建的)。

我愿意接受官方解决方案、CSS hack 以及任何真正有效的解决方案。

Answer 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 提供我修改过的 base plunker demo。