Scrollbars and Page Width

So I’ve been obsessing with my site design over the last few weeks. It started with some big changes at first, followed by a seemingly non-stop stream of little tweaks (including some that will get committed with this post). One thing that’s irked me for awhile was that when clicking between most of my pages and my contact page, the width alignment of the content would change due the the absence of a scrollbar. At first, I played around with some CSS to remove the scrollbars from all pages. I only use a MacBook Pro or my phone, so I’m always scrolling the page with a page grab rather than a scrollbar grab. However, removing the scrollbar would likely cause usability issues for those who instead prefer to use their mouse to grab the scrollbar. Further, I couldn’t find an elegant cross-browser solution. overflow-y:hidden worked in most browsers, but it made the page unscrollable with the mouse wheel in Firefox. So, I went the other route and forced a scrollbar on all pages, whether there was a need for one or not. Now all pages size the same which means there’s no longer that jumpy resize problem with going to the contact page, or any other minimal page.

html {
    overflow-y: scroll;
}

References

This is a personal website. Unless otherwise stated, the content and opinions expressed here are my own and not those of my employer.