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

Activity

1. tuan-hda commented on Mar 7, 2023

   

   tuan-hda

   on Mar 7, 2023

   Last edited by tuan-hda

   More actions

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

   👍React with 👍1Reacted by kitiho
2. Chandan4862 commented on Mar 8, 2023

   

   Chandan4862

   on Mar 8, 2023

   Author

   More actions

   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>
   
3. tuan-hda commented on Mar 9, 2023

   

   tuan-hda

   on Mar 9, 2023

   More actions

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