Alternative To body {overflow:scroll;} That Will P

Question

I was pulling my hair out for about 30 minutes trying to figure out why my webpage was shifting a few pixels when I was navigating between pages. I finally realized that it was because the right scroll bar, on the longer pages, was popping up and shifting stuff over.

I found a solution that goes as follows.

body{
    overflow: scroll;
}

This forces every page to have a scroll bar, so the appearance/disappearance of the scroll bar does not jostle the elements of the page back and forth a few pixels as you navigate through the site.

Is there a better way to accomplish what I want without rendering a useless scroll bar on the right side? I imagine you could offset the pages that don't have very long content a few pixels to compensate, but then it seems like you'd have to keep track of which pages are a certain length, and switch around their CSS depending on how much content they have which would be awfully annoying.

Thanks for any advice :)

Answer 1

Sadly, i think that forcing scrollbar to show is the only way to avoid page shifting... just try only "overflow-y" as you dont need horizintal scrollbars