Body Scrollbar
So considering what I do for my job, I thought I might be useful and start sharing useful things I find along the way. It's almost a weekly occurrance that I come across something that makes me go "Why haven't I been doing this for the last 6 months?"
I'll put this behind a fold, for those who really couldn't care less.
Today's Tip - Page scrollbars
Preface: If you are only interested in how to force the browser to display a scroll bar, just skip the text and check out the block quote below.
One common annoyance I've come across is when I'm putting together a site, a short page will fit entirely within the window and show no scroll bar, and upon navigating to a page with longer content the scroll bar shows up and shifts everything to the left. Now this doesn't interfere with how the site actually looks, but when you work with websites fairly often you start noticing just 1 pixel differences, so the 10-or-so pixel bump the scroll bar provides can be unsightly. ... that is, if you're using something like Fire Fox that doesn't display the scroll bar by default. If you develop exclusively for IE (I shudder at the thought), disregard this post.
Now I know what you're thinking, "This is obviously a browser behavior, and I should just live with it." I thought this way for quite a while until I actually tried to do something about it. I came across a really simple solution: force the scrollbar to be present at all times. And how do we do this? Easy, with the overflow property! Just add this line to wherever it is you put your CSS in your site.
body {overflow-y: scroll;}
And that's all! Now for those uninformed and extra curious, I'll give a brief overview of what the overflow property does. Essentially, it dictates how a container will handle content which would otherwise go beyond its boundaries. You can specify the overflow of each direction (horizontal and vertical) individually with overflow-x and overflow-y, or you can do both in one shot with a simple overflow.
The value of scroll lets the container know that it should clip (hide) "overflowing" content, but provide a scrollbar for the user to view the rest. The body container automatically clips content, so all we are changing here is the behavior of the scrollbar.