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

PUBLISHED 23 Dec 2018 - UPDATED 10 Jun 2019

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 I'm a freelance web analyst from the UK. I'm here to help with your analytics, ad operations, and SEO issues.
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram