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 have had the same problem and tried a bunch of the above solutions without result. After lots of research I came to this solution. Just paste these lines into your css file.

div.myautoscroll {
    height: 40ex;
    width: 40em;
    overflow: hidden;
    border: 1px solid #444;
    margin: 3em;
}
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

What was happening to me was that Mac OSX lion and up (I am running Yosemite) auto hide scrollbars to seem more sleek. The code above overwrites the default and brings back the scrollbar ... combined with the css for changing the overflow to scroll on hover this will achieved the desired result for users on the newer mac OSXs. Here is a fiddle (not my own but the one where I found this answer). http://jsfiddle.net/simurai/UsvLN/