84

My site has both very short and longer pages. Since I center it in the viewport with margin: 0 auto, it jumps around a few pixels when switching from a page that has a scrollbar to one that hasn't and the other way around.

Is there a way to force the vertical scrollbar to always appear, so my site stays put when browsing it?

Bakabaka
  • 1,505
  • 1
  • 13
  • 21

2 Answers2

110

Give your body tag an overflow: scroll;

body {
    overflow: scroll;
}

or if you only want a vertical scrollbar use overflow-y

body {
    overflow-y: scroll;
}
John Conde
  • 217,595
  • 99
  • 455
  • 496
8
html { overflow-y: scroll; }

This css rule causes a vertical scrollbar to always appear.

Source: http://css-tricks.com/snippets/css/force-vertical-scrollbar/

Bakabaka
  • 1,505
  • 1
  • 13
  • 21
  • 20
    In Chrome on Mac OS this does not cause scroll bar to "appear", it merely causes it to "exist". – ESR Jan 29 '20 at 11:28
  • I have been doing it this way: .element { overflow-y: visible; } Painfully simple I know... – Jason Is My Name Jan 07 '21 at 17:58
  • visible [means something else](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow): Content is not clipped and may be rendered outside the padding box – Jeremy Field Aug 18 '21 at 23:58