Open Chandan4862 opened 1 year ago
Maybe renderThumbVertical
prop is the thing you need.
Since this package renders your scrollbar as a div, you can achieve it this way:
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>
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;
}
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>
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;
}
how can i show scrollbar when i hover over container, passing css to renderTrackVertical and other such props are not working