Content jumps horizontally whenever browser adds a scrollbar

Question

I\'m using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page\'s height and the browser adds a scrollbar,

Answer 1

You can force the scrollbar to always appear:

http://www.mediacollege.com/internet/css/scroll-always.html

Answer 2

I've run into this problem myself and I've found two ways to solve it:

1. Always force the scrollbar to be present: body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.

2. Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.

I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).

Facebook uses option 2.

Answer 3

The process is :

html {
   overflow-y: scroll !important;
}

This will show the scrollbar even there no need any scroll bar.

Answer 4

Best possible way through CSS, It will show/hide Scrollbar accordingly, will solve jump problem, works on every browser

html {
    overflow: hidden;
 }

body {
    overflow-y: auto;
    -webkit-overflow-scrolling:touch;
}

Answer 5

Use this CSS:

body { overflow-y: scroll; }

Answer 6

I'll just leave this link here because it seems an elegant solution to me:

https://aykevl.nl/2014/09/fix-jumping-scrollbar

What he does is add this css:

@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.

You can see an example here:

http://codepen.io/anon/pen/NPgbKP