How to disable horizontal scroll

[mdodge-ecgrow]

I am using this in my app and it is creating a horizontal scrollbar due to some slight overflow that I do not want. I found this issue with code sample in the repo this is based off of here: https://github.com/malte-wessel/react-custom-scrollbars/issues/213

But I tried the code:

renderTrackHorizontal={(props) => (
    <div
        {...props}
        style={{ display: 'none' }}
        className={'track-horizontal'}
    />
)}

But that did not appear to do anything.

[mdodge-ecgrow]

From another comment in that thread, I was able to fix this. I added this code to my Scrollbars component:

renderView={props => (
    <div {...props} style={{ ...props.style, overflowX: 'hidden' }} />
)}

https://github.com/malte-wessel/react-custom-scrollbars/issues/213#issuecomment-456955169

[mdodge-ecgrow]

Just another issue I found with this. So that code above fixes the issue in Firefox, which is what I am used to using. But I just disovered that code actually causes issues in Chrome. It causes the height at the bottom to get chopped off/hidden by I believe the amount of the scroll bar. So I guess I will remove that code for now because we need consistent heights in all browsers. And some content was getting chopped off in Chrome too.

[mdodge-ecgrow]

And I am still having issues with this. So frustrating.

[mdodge-ecgrow]

OK, so looked back in the other thread again. Following the tip from this comment, I was able to resolve my issue. https://github.com/malte-wessel/react-custom-scrollbars/issues/213#issuecomment-399627712