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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © James Clark
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram