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

How to set the width of a vertical scrollbar?

Open jeghers opened this issue 4 years ago • 1 comments

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!

jeghers avatar Mar 25 '20 08:03 jeghers

   // 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; }

fnielson1 avatar Apr 23 '20 18:04 fnielson1