How do I toggle the display of a scrollbar?

I would like to toggle the display of a scrollbar on a DIV container based on whether the mouse is over the container or not. So, only show the scrollbar when the mouse is over the DIV container (and the DIV is overflowing with content, of course).

I have tried to change the overflow from hidden to auto and vice-versa with CSS like the following:

div.container {
    overflow: hidden;
}

d开发者_运维问答iv.container:hover {
    overflow: auto;
}

This does toggle the display of the scrollbar, but when the scroll bar is shown again, it is reset to the top. I need to keep the position of the scrollbar at its last state.

What is the easiest way to toggle the display of a scrollbar? I am trying to stay with a pure CSS solution, but minimal JavaScript would probably be OK.

This is arguably a WebKit bug. Consider reporting it.

Edit: There's already at least one existing bug report. Though that one is somewhat unloved.

For now, here's a silly workaround:

$('.container').hover(function(){
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(0).scrollTop(scrollTop);
});

See: http://jsfiddle.net/C5vmK/

This can easily be written without jQuery if you're not already using it.