Forcing the browser to display a vertical scrollbar - how and why

23 December 2018

Here's a little web design tip I came across recently. You can add the following to your CSS stylesheet to force the browser to display a vertical scrollbar, even on web pages that are too short to need one:

Great, but why?

Well, your website may well have a mix of long pages (that show a scrollbar) and short pages (that do not). When a user moves from short to long or vice-versa, the whole website will shift to one side by the width of the scrollbar. It's subtle, but annoying when you notice it.

The CSS overflow property is very well supported. I've tested this snippet just now in Chrome (71), Firefox (64.0), Edge (42.17134.1.0) and Internet Explorer (11), and all seems OK.

Thanks to Stack Overflow and CSS Tricks!

Notify of
Inline Feedbacks
View all comments
James Clark
Hi! I'm James Clark and this is my website. I publish all my guides completely free, so if you find them useful then please:
Copyright © James Clark
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram