Quick trick to force vertical scrollbar

Philippe.Lahaie 0 2K Views

We have all been there, you have a centered site and some pages have enough content to fill the screen while some don't. So when you move back and forth between one that does and one that doesn't you see a small jump happen.

Here is a small css fix to force the vertical scrollbar to always be visible.

The site i got the original snippet from claims it doesn't work in opera but it worked for me in all browsers.

What i changed is since "overflow-y" isn't valid css i started with the valid "overflow" to enable both the vertical and horizontal scrollbars in the event some browser did not recognize the two other rules, then proceeded with hiding the horizontal scrollbar and (just for the overkill, since logically : 'both visible' + 'x hidden' = 'y visible' ;P ) forcing the vertical scrollbar.

So we end up with a simple three css rule that forces a vertical scrollbar but degrades to forced vertical & horizontal scrollbars in the events that the invalid css isn't applied. Also, it does not temper with your html/body/container heights so it keeps the appearance of your site true to its content!

Enjoy & comment :)

Phil~

html 
{
    overflow:scroll;
    overflow-x:hidden;
    overflow-y: scroll;
}
Member Avatar for RockVacirca
RockVacirca 0 Newbie Poster

The problem with centred fixed width websites slightly jumping left and right with pages that need/don't need scrollbars has been discussed for many years now.

Solutions that set the height to 100% then add a bottom margin of 1px are also common.

However, forcing a scrollbar (that is not needed) to fix this left/right jumping is far from elegant.

Has anyone come up with a solution that determines if a page length requires a scrollbar, and if it does then apply a horizontal offset to the page to negate the jumping?

Rock

Member Avatar for Philippe.Lahaie
Philippe.Lahaie 42 Posting Whiz in Training

that would be a good solution path also but would more than likely require javascript which a lot of people would dislike, not to mention browsers probably dont have all equal scroll bar widths.

the reason i think forcing a scroll bar is more elegant than setting height to 100% is that first of all it allows the scroll bar to move a few pixels and second, depending on your layout and css forcing the height to 100% could mess up with your site's background colors or images, lets say you have content for 75% of the page and your site should cut after but continues to 100% with its background just to make sure you dont see an horizontal jump.

Better layout management would easily fix that but i still think forcing the scroll bar is easier and nicer just for the fact that the un-needed scroll bar is disactivated.

One other viable solution path would be to use a layout with a fixed header and sidemenu or whatever, and fix the height completly, making the content's overflow scroll within the placeholder, thus never expending the site itself to a size requiring a browsers scrollbar.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview