react-custom-scrollbars icon indicating copy to clipboard operation
react-custom-scrollbars copied to clipboard

How to disable the horizontal scrollbar?

Open navinprasadk opened this issue 7 years ago • 8 comments

navinprasadk avatar Dec 19 '17 10:12 navinprasadk

Add this to the scrollbar props
renderTrackHorizontal={props => <div {...props} style={{display: 'none'}} className="track-horizontal"/>}

ryan-ds17 avatar Dec 28 '17 12:12 ryan-ds17

@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

slim1801 avatar Jan 11 '18 00:01 slim1801

usually if the horizontal bar is appearing is because the inner content wrapper does not have overflow: hidden. Try that to see if solves

bruno-de-queiroz avatar Jun 23 '18 03:06 bruno-de-queiroz

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 avatar Jan 23 '19 20:01 pawelangelow

@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?

Losses avatar May 10 '20 06:05 Losses

Add this css code -

/* disable horizontal scroll */
.credential-scroll div {
  overflow-x: hidden !important;
}

ex-rajesh-edx avatar Oct 18 '21 13:10 ex-rajesh-edx

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>

Attila217 avatar Dec 07 '21 13:12 Attila217

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.

mdodge-ecgrow avatar Nov 18 '22 16:11 mdodge-ecgrow