react-custom-scrollbars
react-custom-scrollbars copied to clipboard
How to set the width of a vertical scrollbar?
Is there a way to make the very slender vertical scrollbar just a little thicker? I'd like it to be a little easier to click on. It looks like the vertical scrollbar thumb is about 6 pixels wide. Is there a way to customize this so I can make it larger?
Thanks in advance!
// Your component
const vertTrackWidthChosen = '8px'; // Original is 6px
const horzTrackHeightChosen = '8px'; // Original is 6px
return (
<Scrollbars {...props}
renderTrackHorizontal={({style, ...props}) => {
return <div {...props} className={horzTrackClass} style={{...style, height: horzTrackHeightChosen}} />
}}
renderTrackVertical={({style, ...props}) => {
return <div {...props} className={vertTrackClass} style={{...style, width: vertTrackWidthChosen}} />
}}
>
{props.children}
</Scrollbars>
)
In css file:
/* Scrollbars */ .scrollbarTrackVertical { right: 2px; bottom: 2px; top: 2px; }
.scrollbarTrackHorizontal { right: 2px; bottom: 2px; left: 2px; }