react-scrollbars-custom icon indicating copy to clipboard operation
react-scrollbars-custom copied to clipboard

Scroll flickering/jumping when I add margin/padding to content

Open gabrielalg opened this issue 3 years ago • 1 comments

Hi!

I'm having a really tough time trying to figure out how to stop my component to flicker like this:

ezgif com-gif-maker

In my project, I need to add a margin or padding when the scroll is visible, here is an example:

empower2

But, when the scroll is about to appear, the margin style is added and the component height/width changes, which (I assume) is causing this issue. What is the correct approach to make this work properly?

This is the style I'm adding when the scrollY is visible: .trackYVisible .ScrollbarsCustom-Wrapper { margin-right: 24px; }

Thank you!

gabrielalg avatar May 22 '22 20:05 gabrielalg

@gabrielalg I fixed it removing the margin right and also setting the inset to 0px for the scrollbar wrapper to maintain the padding of the container.

ronakrrb avatar Jan 24 '24 03:01 ronakrrb