Showing scrollbars only when mouseover div

Question

Given this div:

How can I make the scrollbars visible only when the mouse is

Answer 1

I came up with this solution. Basically the negative margin cuts off the vertical scrollbar.

.hidden-scrollbar {
    padding-right: 50px;
    margin-right: -25px;        
    overflow-y: auto;        
}

.hidden-scrollbar.hover-scrollbar:hover {
    padding-right: 25px;
    margin-right: 0;
    overflow-y: auto;
}

LESS mixin

.hidden-scrollbar(@padding) {
    padding-right: 2 * @padding;
    margin-right: -@padding;
    overflow-y: auto;        

    &.hover-scrollbar:hover {
        padding-right: @padding;
        margin-right: 0;
    }
}

NOTE: @padding should be at least the scrollbar width (e.g. 25px)

Basically add this to your LESS/CSS and add the class to the element that needs it's scrollbar cut off.