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

Unfortunately there is no other way to prevent your problem. Just use

     body {
        overflow:hidden;
     }

As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS. Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.

I hope that helps.