Question

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

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

Answer 1

您可以通过CSS进行设置

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

有关实时示例，请参阅此Plunk

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

Answer 2

还涵盖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中有一个摘要行时，可能会发生这种情况。

工作柱塞demo。

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

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

2 个答案: