Question

I was trying out the on hover scroll bar style that is used in many places but ran into a problem. The appearance of the scroll bar on hovering causes text to jump which looks jarring.

#scroll {
   width: 200px;
   height: 200px;
   overflow: hidden;
}


#scroll:hover {
  overflow-y: scroll;
}

This Fiddle shows the jumping text on mouse hovering
Could I somehow prevent the jumping of text while keeping the appearance of scroll bar on hover?

Answer 1

just use <p> tag for your text like this:

http://jsfiddle.net/pdbYz/6/

UPDATE for firefox:

http://jsfiddle.net/pdbYz/19/