Unset -webkit-scrollbar when in: hover

Question

I use css that hides scrollbars until it hangs over it (working on Firefox and IE)

Before freezing, it looks like this:

div#popular-service-container > div:first-child > div::-webkit-scrollbar { /* Safari & Chrome */ display: none; } div#popular-service-container > div:first-child > div{ overflow-y: auto; overflow-x: hidden; /* IE */ -ms-overflow-style: none; /* Firefox */ overflow: -moz-scrollbars-none; height: calc(100% - 160px); margin-top: 20px; padding-bottom: 20px; font-family: KarlaRegular,arial,sans-serif; font-size: .9em; text-align: left; color: #4d4e50; } div#popular-service-container > div:first-child > div:hover{ -ms-overflow-style: scrollbar; /* Firefox */ overflow: scroll; } 

and in IE / Firefox, when the mouse above it shows scrollbars, such as:

But with the code for Chrome hover (the code below shows the options that I tried separately):

 div#popular-service-container > div:first-child > div:hover::-webkit-scrollbar { /* Safari & Chrome */ display: initial; display: unset; } 

it leaves an empty scrollbar, as in the example:

Any ideas on what's missing?

Answer 1

I think this is what you want to achieve.

 div#something { height: 200px; width: 100px; overflow-y:hidden; } div#something:hover { overflow-y:scroll; overflow-x: hidden; } 

 <div id="something"> <ul> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul> </div>