Render scrollbars outside element

[TheOpti]

I looked into the docs and demos but unfortunately I couldn't find solution to my problem. I am trying to style my table so that scrollbars from react-custom-scrollbars are rendered outside my element. Is it possible to do this? I tried playing with different margin and padding values, but with no result.

Any help/demos/showcase would be appreciated.

[hosembafer]

Have the same issue. Looks like we can't do this with custom-scrollbars. Any workarounds?

[mrados7]

@TheOpti Hi I had same issue but solution is easy. So your Scrollbar component has renderView property where you can set your own View container for your scroll content.

<Scrollbars
   renderView={props => <div style={{paddingRight: '15px', ...props.style}} />} // your content will be moved 
   15px from right side
>
       render content list here...
</Scrollbars> 

[yh54321]

@TheOpti Hi I had same issue but solution is easy. So your Scrollbar component has renderView property where you can set your own View container for your scroll content.

<Scrollbars
   renderView={props => <div style={{paddingRight: '15px', ...props.style}} />} // your content will be moved 
   15px from right side
>
       render content list here...
</Scrollbars> 

All that does is add padding to the scroll-able content, making it appear smaller. That creates a different appearance than what was addressed in this issue.

[mecharmor]

any verdict on this?