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!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
James Clark
Hi! I'm James Clark and this is my website. Need help with your own website's analytics, SEO, content or ads? Contact me
Copyright © James Clark
0
What do you think? Leave a commentx
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram