CODEWITHSUNDEEP
javascripthtmlcssscrollbarmousehover
nookz producer
nookz producer

Reputation: 11

How do i only show scrollbar on hover?

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

'

Upvotes: 0

Views: 2331

Answers (1)

Krypton
Krypton

Reputation: 85

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.

Upvotes: 2

Related Questions