Option to show the scrollbar when you hover over the container.

[Chandan4862]

how can i show scrollbar when i hover over container, passing css to renderTrackVertical and other such props are not working

[tuan-hda]

Maybe renderThumbVertical prop is the thing you need.

Since this package renders your scrollbar as a div, you can achieve it this way:

1. Add custom-scrollbar-container to Scrollbars className and add custom-scrollbar to className of the div inside renderThumVertical prop (feel free to name the classes your way)

   <Scrollbars
     className='custom-scrollbar-container'
     renderThumbVertical={({ style, ...props }) => (
       <div {...props} className='custom-scrollbar' />
     )}
   >
     <div className='h-16' />
     <div className='transition-color h-[5000px]'>Main</div>
   </Scrollbars>

2. Add these lines to index.css

   .custom-scrollbar-container .custom-scrollbar {
   /* Use opacity here instead of display:none for a good looking transition */
   opacity: 0;
   transition-property: opacity !important;
   transition-duration: 0.3s !important;
   }
   
   .custom-scrollbar-container:hover .custom-scrollbar {
   opacity: 100;
   }

You can simply right click on the scrollbar and inspect it Addtionally, if you want to change width of scrollbar, add this

  div:has(> div.custom-scrollbar) {
    width: 12px !important;
  }

[Chandan4862]

Thanks for the help man! I need to wrap this scrollbar into table element but the above code shared also seem to not work. I have a structure like this

<div>
   <table></table>
</div>

[tuan-hda]

Does your code look like this one?

    <Scrollbars
      style={{
        width: 500,
        height: 300,
      }}
      renderThumbVertical={({ ...props }) => (
        <div
          {...props}
          className='custom-scrollbar'
        ></div>
      )}
    >
      <table className='custom-scrollbar-trigger'>
        {/* rows go here */}
      </table>
    </Scrollbars>

Then you should try this one

.custom-scrollbar {
  opacity: 0;
  transition-property: opacity, color, background-color !important;
  transition-duration: 0.3s !important;
}

div:has(> .custom-scrollbar-trigger:hover) ~ div > .custom-scrollbar {
  opacity: 100 !important;
}