React-custom-scrollbars: Hiding horizontal scrollbar

[meraymond2]

I like this a lot, but in my component, I want to set my overflow-x to hidden, but the component seems to be overriding this, setting both x & y to scroll. This wouldn't be such a problem, except that only the vertical is the custom scrollbar, the horizontal is the normal browser one.

Is/can there be an option in the props to disable one of them? Or do you know why only one of them is being rendered properly?

Thanks!

[maximblack]

i solved this by adding css/scss rules:

.area { & > div:nth-child(1) { overflow-y: scroll !important; overflow-x: hidden !important; } & > div:nth-child(2) { display: none; } }

[meraymond2]

Thanks, that seems to be working for me (once I realised that I needed to add the .area to my ).

I wouldn't mind a prop to switch one of them on or off, but this is a nice solution for now.

[ndac-todoroki]

Maybe this isn't a solution exactly for you, but you can just hide the scrollbars:

<Scrollbars
        renderTrackHorizontal={props => <div {...props} className="track-horizontal" style={{display:"none"}}/>}
        renderThumbHorizontal={props => <div {...props} className="thumb-horizontal" style={{display:"none"}}/>}
        renderTrackVertical={props => <div {...props} className="track-vertical" style={{display:"none"}}/>}
        renderThumbVertical={props => <div {...props} className="thumb-vertical" style={{display:"none"}}/>}
>

it just hides it: you can still scroll it by touch or trackpad.

[viridia]

It would be nice to add a 'horizontal=false' property (same for vertical) to disable scrolling along a particular axis. I've tried several other scrollbar packages and some of them had an option like that (although they had other problems which is why I eventually went with this one.)

Looking at the code, it doesn't seem like it would be that hard to do either.

[malte-wessel]

There is no such option because the component relies on the browser's native behaviour on showing scrollbars. Think of the Scrollbars component as a div with overlfow: scroll. You need to ensure that its content is not wider than the Scrollbars component itself.

[6-162]

@malte-wessel thats good , and the content is not wider, its just that the Scrollbars componenet adds -17px margin-right to my node which makes it wider and renders the horizontal scrollbar

[malte-wessel]

can you provide some code, that reproduces the issue?

[isabellachen]

Actually the -17px margin doesn't seem to effect the scroll. I though it was too, but in my case it was indeed the width of the inner contents.

[cTxplorer]

In my case -17px margin-right is causing the container to overflow horizontally; the actual content fits very well inside the viewable area..

[khaireddines]

.gx-layout-sider-scrollbar div:first-child{
overflow-x: hidden !important;
}