react-custom-scrollbars
react-custom-scrollbars copied to clipboard
How to disable the horizontal scrollbar?
Add this to the scrollbar props
renderTrackHorizontal={props => <div {...props} style={{display: 'none'}} className="track-horizontal"/>}
@ryan-ds17 I believe this just hides the scrollbar but still enables scrolling for that direction. Is there a way to just totally ignore horizontal or vertical scrolling?
Would be nice if there was a prop like disableHorizontalScrolling
and disableVerticalScrolling
usually if the horizontal bar is appearing is because the inner content wrapper does not have overflow: hidden
. Try that to see if solves
In addition to @creativelikeadog 's answer ->
renderView={props => (
<div {...props} style={{ ...props.style, overflowX: 'hidden' }} />
)}
I had to set overflow-x of the content wrapper to hidden.
@pawelangelow If there's a autoHeight
flag, the height of renderView
need to be handled seperately.
@malte-wessel What about providing a separate flag for this feature?
Add this css code -
/* disable horizontal scroll */
.credential-scroll div {
overflow-x: hidden !important;
}
i use this trick:
const ref = useRef(); const someRef = useRef({ scrollLeft: 0, scrollTop: 0, }); const handleOnScrollFrame = useCallback(event => { if (disabled) { ref.current.scrollLeft(someRef.current.scrollLeft); ref.current.scrollTop(someRef.current.scrollTop); } else { someRef.current.scrollLeft = event.scrollLeft; someRef.current.scrollTop = event.scrollTop; } }, [disabled])
<Scrollbars onScrollFrame={handleOnScrollFrame} ref={ref} {...props} > {children} </Scrollbars>
In addition to @creativelikeadog 's answer ->
renderView={props => ( <div {...props} style={{ ...props.style, overflowX: 'hidden' }} /> )}
I had to set overflow-x of the content wrapper to hidden.
That code works great in Firefox. But for my application it actually broke it in Chrome. In Chrome, part of the bottom got chopped off or hidden, I am assuming the height of the scrollbar.