0

I want to show a vertical scrollbar (if it is required) on a div only upon hover'ing that div.

This is achieved via

.my-div-class {
    overflow: hidden;
}

.my-div-class:hover {
    overflow-y: auto;
}

However when scrollbar appears (upon hover'ing) all the contents inside that div moves and wraps, which is not desired. Do I have an option to "pre-book" space for vertical scrollbar always, so that my div contents is always wrapped (though scrollbar itself is transparent). And on-hover I just make that scrollbar visible.

This should be cross-browser supported.

Alec
  • 1,486
  • 2
  • 14
  • 30
  • 1
    To clarify: the [answer from kizu](http://stackoverflow.com/a/33264668/6697953) provides a solution that does not trigger the inner div to reflow. [Fiddle](https://jsfiddle.net/2p1hatdg/) – Cory J. Sep 06 '16 at 11:40

2 Answers2

0

did you try to add a right padding and remove it on mouse over ?

Something like this : 

.my-div-class {
    overflow: hidden;
    width:200px;
    height:200px;
    padding-right:18px;
    box-sizing:border-box;
    border:1px solid #333;
}

.my-div-class:hover {
    overflow-y: auto;
    padding-right:0;
}
<div class="my-div-class">
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>
Sylvain B
  • 550
  • 3
  • 9
  • Thanks for your snippet! I just don't want to tie solution to exact scrollbar width values. – Alec Sep 06 '16 at 12:37
0

A second comment by Cory J. helped me achieving what was required.

Community
  • 1
  • 1
Alec
  • 1,486
  • 2
  • 14
  • 30