Forcing Scrollbars  October 8th, 2008

Back sometime around the year 2000 I used Microsoft Internet Explorer to browse the internet. Since then, of course, I've given up on IE (and Windows itself) for daily/regular use. But one thing that I've always thought IE had right was the handling of the vertical scrollbar.

By default, in IE, the vertical scrollbar is always there. Even if there's no handle (aka, not enough content to scroll), it's still there greyed out. Pretty much every other browser around doesn't do this. If there's no reason to scroll then there's no scrollbar at all.

This bothers me because these days it's common for websites to have sliding or otherwise dynamic content on pages. If a page is shorter than your browsers height, no scrollbar is shown. Then some content gets added or you open a panel and you get this jarring effect of the whole page moving 15px or so to the left.

It is a lot less irritating if — when the content gets long enough to need a scrollbar — one just appears in the space already designated for it.

So, on my sites (like this one and WDPC.ca - an especially good example of where this is needed), I add a CSS rule which (varies, but usually) goes like this:

Done. Except that only saves people on sites where I control the CSS from seeing the ugly. What I really want (selfishly) is to not have to see the ugly myself. Ever. Luckily there's an easy solution... Let's do this:

Firefox

Add the above CSS to wherever userContent.css should be on your system (creating it if necessary). On OSX it lives in ~/Library/Application Support/Firefox/profiles/<profile>/.

Safari

Create a file somewhere (eg. ~/Library/Application Support/Safari/userContent.css) with the snippet in it. If you also use Firefox on your system and set it up above, you can just use the same file.

Go to Safari -> Preferences -> Advanced and on the 'Style sheet' dropdown choose 'Other...' and navigate to the CSS file with the rule in it (either Firefox's copy or your own).

Scrollbars Everywhere!

Now, perhaps after restarting your browser, every website will have, at minimum, a blank/greyed out scrollbar on the right side. Opera seems to leave both vertical and horizontal scrollbars present-but-disabled at all times and I'm not peticularly fond of any other browsers not based on Firefox or Webkit, so this is all I need. It adds just a little bit of joy to my daily browsing :)

Some social stuff: