search

malte-wessel / react-custom-scrollbars

React scrollbars component
http://malte-wessel.github.io/react-custom-scrollbars/
MIT License
3.2k stars 577 forks source link

Render scrollbars outside element #309

Open TheOpti opened 5 years ago

TheOpti commented 5 years ago

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 commented 5 years ago

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

mrados7 commented 5 years ago

@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 commented 5 years ago

@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 commented 3 years ago

any verdict on this?