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

Question

是否可以始终在ag-grid中显示水平滚动条？这个问题是在他们的 GitHub 页面上作为问题提出的，但他们似乎忽略了它（我能告诉你的是，它不是在他们自己的问题跟踪器中创建的）。

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

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演示。

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

Answer 2

2022 年更新

const gridOptions: GridOptions = {
    alwaysShowHorizontalScroll: true
}

https://www.ag-grid.com/javascript-data-grid/grid-options/#reference-scrolling-alwaysShowHorizo​​ntalScroll

Answer 3

你可以通过CSS设置它

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

有关实例，请参阅此Plunk

尝试从列菜单中删除列，您将看到滚动条无论如何都会显示。