How to switch the scroll bar display?

Question

I would like to switch the scroll bar display in the DIV container based on whether the mouse is above the container or not. Thus, only the scroll bar is shown when the mouse is above the DIV container (and, of course, the DIV is full of content).

I tried changing the overflow from hidden to auto and vice versa using CSS, as shown below:

div.container { overflow: hidden; } div.container:hover { overflow: auto; } 

This toggles the display of the scroll bar, but when the scroll bar is displayed again, it is at reset at the top. I need to keep the scrollbar in its last state.

What is the easiest way to switch the scroll bar display? I am trying to stay with a clean CSS solution, but minimal JavaScript will probably be ok.

Answer 1

This is possibly a WebKit error. Think about it.

Edit: There is already at least one existing error report . Although this man does not like a little.

---

Now, here's a stupid workaround:

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

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

It can be easily written without jQuery if you are not already using it.