Auto hiding vertical scrollbars using css overflow

Question

I came across a problem using css overflow for autohiding the vertical scrollbar. I read in a few articles to use css hover pseudo class to achieve this behaviour and the good thing is I am successful to some extent.

I used both 'scroll' and 'auto' for the overflow-y property. With scroll it works like a charm, but with 'scroll' the problem is even if there is no need to show the scrollbar, it is visible which I feel 'auto' does very well.

But again with 'auto' the problem is there is a 16px(I assume) gap at the right side. Probably it the width of the scrollbar. I wanted the full width. I used a background to explain my problem.

Here is the fiddle. http://jsfiddle.net/9scJE/

div.autoscroll {     height: 200px;     width: 400px;     overflow: hidden;     border: 1px solid #444;     margin: 3em; }  div.autoscroll:hover {     /* overflow-y: scroll; */     overflow-y: auto; } 

Appreciate any help.

Answer 1

This actually seems like a browser bug to me, but it seems to work like you want if you add padding-right: 1px on hover.

div.myautoscroll:hover {      overflow: auto;      padding-right: 1px; } 

http://jsfiddle.net/ExplosionPIlls/9scJE/1/

Answer 2

You should compensate for the scrollbar with padding.

div.autoscroll:hover {     /* overflow-y: scroll; */     overflow-y: scroll; padding-right: 16px;  } 

However it is better to do this with javascript, since the scrollbar width can slightly differ between browsers. I have used this solution with success: How to calculate the width of the scroll bar?