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, the auto margins force the content to jump half the width of the scrollbar left.

Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?

I think this should be enough info for the problem, but let me know if I can answer anything else.

Edit for clarification: I don't want to force the scrollbar to appear.

Solution 1

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

Solution 2

Use this CSS:

body { overflow-y: scroll; }

Solution 3

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.

Solution 4

You can force the scrollbar to always appear:

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

Solution 5

The process is :

html {
   overflow-y: scroll !important;
}

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

View more solutions

Comments

[thenetimp]

Option 1 works on all browsers, older browsers include the scroll on all pages by default. Facebook does #2 because they don't want the scroll bar to show if it's not necessary.

[Halcyon]

I think it gives the problem of double scroll bars on some browsers (the scrollbar will be in the body). It's been a while, I really don't want to test this again :P

[Nick Bergseng]

Ah yes... but what if I don't want to force scrollbars? What if I want the browser to not have a scrollbar when it doesn't need one?

[Nick Bergseng]

See my edit. I don't want to force scrollbars when not necessary.

[ulu]

Excellent! I didn't want both margins, so I applied a negative right margin instead: margin-right: calc(-100vw + 100%); In addition, I had to kill the bottom scroll: overflow-x: hidden;

[dwjohnston]

Note that this only works if there is an existing whitespace margin to the left of your content.

[dwjohnston]

Good answer @ulu you should post it.

[alternize]

"overflow: hidden" on the html node prevents the browser from remembering the scoll state when using the navigation buttons

[poshest]

This is great. Now how can I do it on a div which has overflow: auto? Is there an equivalent to 100vw for elements which are not themselves the full width of the viewport?