How do i only show scrollbar on hover?

Question

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

'

Please provide enough code so others can better understand or reproduce the problem. — Community, May 02 '22 at 03:25

score 2 · Answer 1 · answered May 02 '22 at 00:15

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.

How do i only show scrollbar on hover?

1 Answers1