Scroll Bar Appears and Makes Page Jump

Question

I have aJQuery animation that expands a DIV and makes it go larger than the browser. When that happens a scroll bar appears and meks the page look as if it jumps. Anyone have any solutions for this?

http://www.kerrydean.ca/MATHESON/home5.html

score 1 · Answer 1 · edited May 23 '17 at 11:55

1

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

See: Making the main scrollbar always visible.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 29 '11 at 15:54

Geert

1,804
15
15

score 0 · Answer 2 · answered Apr 29 '11 at 15:48

0

If you know you will need need the overflow then turn it on in CSS

body {
  overflow: scroll;
}

answered Apr 29 '11 at 15:48

John Hartsock

85,422
23
131
146

score 0 · Answer 3 · answered Apr 29 '11 at 15:51

I guessing that the page looks like it 'jumps' because the vertical scroll bar is dynamically added to the window when the content goes below the bottom of the browser.

You can make the vertical scroll bar always appear regardless whether or not there is content by setting the height of your HTML tag to 101%:

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 101%;">

score 0 · Answer 4 · answered Apr 29 '11 at 15:55

0

If the page is never supposed to scroll, you can set overflow: hidden on the body tag. Also, you might set make the gutters on the left side constant width.

answered Apr 29 '11 at 15:55

KingErroneous

989
1
8
16

1

im interested in this gutter thing. Do you mean I can set it so the playout already accommodates the size of scroll bar, so when i t appears, it wont jump? – Greg Apr 29 '11 at 16:18

score 0 · Answer 5 · answered Apr 29 '11 at 15:56

0

You can do "overflow-y:hidden" on the body element and it will disable scrollbar

answered Apr 29 '11 at 15:56

Stanislav Ageev

778
4
10

Scroll Bar Appears and Makes Page Jump

5 Answers5

Linked