1

I have this problem in react.
Perfect-Scrollbar dont work properly with Ag-Grid.
Vertical Scrollbar only show if you use keyboard and scoll down in list and Horizontal Scrollbar dont show PerfectScrollbar at all.

"react": "^16.9.0"
"ag-grid-react": "^21.1.0"
"perfect-scrollbar": "^1.4.0"

I have tried to update Perfect-Scrollbar after dataloading.
I have tried several css settings.

I have a codesandbox sample to demonstrate.
https://codesandbox.io/s/ag-grid-perfect-scrollbar-wgbsj

I would like Perfect-Scrollbar to work with Ag-Grid because its looks great.

Henrik
  • 243
  • 1
  • 3
  • 12
  • 1
    It's not the best idea. You will be fighting to get this working in multiple places, particularly if you use other ag-grid features such as column pinning. Native scrollbars are better, try to avoid using JavaScript scrollbar replacements for core UI. Instead, you should customise the native scrollbars in Chrome/Firefox, and just let anything else use native scrollbars. Chrome/WebKit: https://css-tricks.com/almanac/properties/s/scrollbar/. Firefox: https://stackoverflow.com/questions/6165472/custom-css-scrollbar-for-firefox/54101063#54101063 – thirtydot Aug 25 '19 at 18:22
  • Thanks, I have working CSS for all major browser except Edge. Edge is always a problem with css scrollbars. So I was hoping for cross-browser javascript solution. I need a better solution for Edge. I will try more to see if I cen get it working. – Henrik Aug 26 '19 at 06:57
  • 1
    Edge users are used to their scrollbars looking like that. It's just not worth using this for ag-grid. Also, Edge is [moving over](https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/) to Chromium. Meaning that WebKit's CSS scrollbar styling [will work](https://caniuse.com/css-scrollbar) in future Edge. – thirtydot Aug 26 '19 at 17:20
  • 1
    [Also](https://github.com/mdbootstrap/perfect-scrollbar#before-using-perfect-scrollbar): "Finally, scroll hooking is generally considered as a bad practice, and perfect-scrollbar should be used carefully. Unless custom scroll is really needed, using browser-native scroll is always recommended.". [And](https://github.com/mdbootstrap/perfect-scrollbar/wiki/Caveats): "Not work well in body, textarea, iframe, flexbox or any other unusual HTML container". Having said all this, if you do manage to get this working in ag-grid, post an answer to your own question, it might help others. – thirtydot Aug 26 '19 at 17:22

0 Answers0