Pure css way to prevent scrollbar pushing content to the left?

Question

Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css? I mean no hacks or anything.

I tried two javascript solutions:

1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.

2) Calculate the offsetWidth and apply it on the wrapper div on every resize.

What didnt work:

1) Position absolute.

2) Floating everything to the left was a bad idea.

3) Leaving the scrollbar visible (Looks bad).

4) Overflow-y hidden makes things user unfriendly.

Answer 1

There are a lot of ways to go around this issue though normally you won't mind a little push to the left:

1. Give overflow-y: scroll to body and make sure always there is a scrollbar.

2. Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:

   a. Giving width: 100vw to body element, or

   b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.

3. There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.

Answer 2

Just give your body a width of 100vw like this:

body{
   width: 100vw;
}