Add padding to scrollbar

Question

I'm having a unique situation. I need to make a scrollable area that has a custom scrollbar which is slightly padded from the container. At first, I was thinking of adding an additional container that would have the necessary padding to create the illusion that the scrollbar itself has padding, but some elements will have different background color from the additional container and that would make obvious there's another container instead of the scrollbar having padding.

As you can see, the background color of each individual container spills out of the main container past the scrollbar. Is there any way I can add padding to the scrollbar or at least a hack that would give that impression?

Answer 1

Initially, I have found and started using react-custom-scrollbars npm package, but it seemed it had a lot of open issues and I had problems implementing it, so I switched to simplebar package which is very lightweight and works similarly to a facebook custom scrollbar. Solved my issue.