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.

Marat Tanalin · Answer 1 · 2012-10-10T14:27:09.253

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>

score 0 · Answer 2 · answered Oct 10 '12 at 14:13

0

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;
}

answered Oct 10 '12 at 14:13

Awal Istirdja

47
4

score 0 · Accepted Answer · edited May 23 '17 at 10:28

0

The only way to change the functionality of the default scrollbar is to implement a completely 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.

edited May 23 '17 at 10:28

Community

1
1

answered Oct 12 '12 at 04:42

ryandlf

27,155
37
106
162

Prevent DIV Resize When Showing Scrollbar

3 Answers3