Prevent DIV Resize When Showing Scrollbar

Question

I've got a scrolling div in which I use CSS to show/hide the scrollbar depending on if the user is hovering over the div. No hover = no scrollbar.

div.mouseScroll {
    overflow: hidden;
}

div.mouseScroll:hover {
    overflow-y: scroll;
}

Pretty simple, except for one problem. When the user hovers over the div, it shows the scrollbar but in doing so it also resizes the content of the div slightly to accommodate the scrollbar. Is there a way to somehow display the scrollbar to the side, or hover it on top? Whatever it takes to prevent the content inside the div from resizing when the scrollbar is added.

I'm ok with using javascript.

Answer 1

Use visibility to hide/show scrollbar presented permanently in both states (see jsFiddle demo):

CSS:

.test {
    background: #ccc;
    width: 150px;
}

.test > DIV {
    overflow-y: scroll;
    visibility: hidden;
    height: 150px;
}

.test > DIV > DIV {visibility: visible; }

.test:hover > DIV {visibility: visible; }

    *+HTML .test > DIV > DIV {min-height: 0; } /* hasLayout for IE7 */

HTML:

<div class="test"><div><div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div></div></div>