This is my start off code to hide scrollbar? how do edit it to only show on hover?
A this moment its just scroll when clicked.
'
/* Hide scrollbar for Chrome, Safari and Opera */
#hide-scrollbar::-webkit-scrollbar { display: none;}
/* Hide scrollbar for IE, Edge and Firefox */
#hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
'
$( function() {
var timer,
count = 0,
MAX_ITERATIONS = 100;
timer = setInterval( function() {
$( '#hide-scrollbar' ).scroll();
if ( ++ count > MAX_ITERATIONS ) {
clearInterval( timer );
}
}, 10 );
});
'
I might misunderstand your problem, but maybe you can fix it with this css:
#hide-scrollbar:not(:hover)::-webkit-scrollbar {
display: none;
}
#hide-scrollbar:not(:hover) {
-ms-overflow-style: none;
scrollbar-width: none;
}
Now the scrollbar will disappear in the moment, you are not hovering anymore. To blend it in, you need to scroll in the div. If you want to blend it in in the moment you hover over the div, check this out: CSS - Overflow: Scroll; - Always show vertical scroll bar?
For better help, provide more details about your problem.