How to always show the horizontal scroll bar in ag-grid?

问题

Is it possible to always show the horizontal scroll bar in an ag-grid? This question was asked as an issue on their GitHub page, but they seem to have ignored it (best I can tell, it was not created in their own issue tracker).

I'm open to official solutions, CSS hacks, anything that works really.

回答1:

You could set it by CSS

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

For live example, refer to this Plunk

Try removing columns from column-menu and you'll see that scrollbar is getting displayed anyways.

回答2:

Solution that also covers macOS/WwebKit browsers

.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);
}

You also need to set property 'scrollbarWidth' on ag-Grid to the width/height number value above

scrollbarWidth=8

This way when you have more rows than fits on the screen, the last row will not be obscured by the scrollbar. This can happen when you have a summary row in ag-Grid.

Working Plunker demo.

Thanks @Parotish for providing the base plunker demo that I modified.

来源：https://stackoverflow.com/questions/52767610/how-to-always-show-the-horizontal-scroll-bar-in-ag-grid