Auto hiding vertical scrollbars using css overflow

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/

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?

::-webkit-scrollbar{
     opacity:0;
     background: transparent;
}
::-webkit-scrollbar:hover{
     opacity: 1;
}
.container:hover::-webkit-scrollbar-thumb{
     background: red;
}