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 acmodate 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.

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 acmodate 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.

• javascript
• html

3 Answers 3

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 modo 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>

I don't know if this is what you are looking for.

add little bit width to hover state style

div.mouseScroll {
    overflow: hidden;
    width:200px;
    height:300px;
}

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

The only way to change the functionality of the default scrollbar is to implement a pletely custom one in javascript. See here: hide scrollbar and show on hover like facebook's new chat sidebar

The JSFiddle in the accepted answer provides source code.