CODEWITHSUNDEEP
csshoverscrollbar
gibreelchamcha
gibreelchamcha

Reputation: 45

Text jumps on hover scroll bar

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?

Upvotes: 3

Views: 2022

Answers (3)

M Rostami
M Rostami

Reputation: 4195

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

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

UPDATE for firefox:

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

Upvotes: 3

keaukraine
keaukraine

Reputation: 5364

I propose to have another container within div#scroll with fixed, slightly smaller width. This way your text won't 'jump' when scroll appears. Since scrollbars have different width on different OS (Windows, Mac, Linux) you should leave some free space to the right, where scrollbar appears.

Please see my fiddle here: http://jsfiddle.net/5RXSW/

To make containers more visible I've applied paddings and background colors. You can tweak these styles for your needs, but please reserve some pixels to the right of div#scroll for scrollbar.

Upvotes: 1

michael.orchard
michael.orchard

Reputation: 486

You can change the width of the container on hover, so that when the scrollbar appears, it pushes outwards instead of inwards. This prevents the text from moving.

http://jsfiddle.net/pdbYz/3/

To achieve this I've added this line to your CSS:

#scroll:hover {
    width: 360px;
}

Upvotes: -1

Related Questions