Question

Let’s say I have a static webpage and the whole page is wrapped, let’s say inside a width of 700px, now if the content of the page is too long then (obviously) a scrollbar appears. BUT the appearance of the scrollbar moves everything to the left of like a few pixels (the ones needed to fit the scrollbar on the right side of the page). What I’d like to do is to remove this “moving” effect, so that if a scrollbar is needed this doesn’t affect the content of the page in any way.

I don’t know if I made myself clear.

let’s say that this is a webpage:

| ………contentcontent …….. |
| ………contentcontent …….. |
| ………contentcontent …….. |
| ………contentcontent …….. |
| ………contentcontent …….. |
| ………contentcontent …….. |
| ………contentcontent …….. |

and this is how it looks with the scrollbar:

| …..contentcontent ………. | |
| …..contentcontent ………. | |
| …..contentcontent ………. | |
| …..contentcontent ………. | |
|……contentcontent ………. | |
| …..contentcontent ………. | |
| …..contentcontent ………. | |

but I’d like to have something like this:

| ………contentcontent …… | |
| ………contentcontent …… | |
| ………contentcontent …… | |
| ………contentcontent …… | |
| ………contentcontent …… | |
| ………contentcontent …… | |
| ………contentcontent …… | |

dots represent whitespace, content represent the webpage content and the column on the right represents the scrollbar.

Answer 1

You can set overflow-y: scroll as rule for your body. This will always display a vertical scrollbar which is disabled unless the content is long enough to be scrolled. This way the content won’t shift to the left when its long enough that you can actually scroll and no scripting is needed to make this work.