One scrollbar or two for content + sidebar?

Question

I'm working on a website design and trying to decide whether to have the sidebar scroll independently of the page content, or have just one scrollbar control both divs. What principle should I use to guide the decision? In which situations would you want the sidebar content to stay fixed while a user scrolls through the main content?

One Scrollbar

• User knows where they are on the page
• content in sidebar remains in same position relative to other content
• Holding the mouse anywhere on the page scrolls the bar
• Large majority of websites use just one scrollbar -- fits with user expectations
• can have fixed width sites without ugly scrollbar in middle of page

Two Scrollbars

• Can view information in sidebar while browsing main content, which is nice when the main content is >4000px in length, or you need information in the scrollbar and in the main content bar at the same time
• Sidebar requires either entire left hand side of page, or fixed header which reduces the importance of the main content, vertical height of both sidebar and main content
• Requires mouse placement inside sidebar to scroll its content
• Two examples of differing decisions here from the same company would be Google Code, which is a fixed-width, one scrollbar site and Google Reader, which has two scrollbars. I think with Google Reader they need a scrollbar because the content is dynamically generated.

I appreciate your help with this -- especially if you could point me to data leaning either way.

Answer 1

I think the option that you didn't enumerate in your question is the one of scrolling content with a floating sidebar (whose location is always a fixed distance from the window edges, not the content edges).

I would think carefully about whether both columns need to scroll. In the cases you highlight, user switching context between the main content and the sidebar would either need to lose their location on the page (if they scrolled to the bottom of the main content and need to access something near the top of the sidebar) or would have to figure out independently scrolling frames and requires more mouse movement to chose which column gets scroll actions.

Without knowing the scope of the application you're developing, my first recommendation would be to limit the sidebar content to less than the height of the window. If you do need more room, you could employ tabs in the sidebar or have horizontally paginated sections within the sidebar.

Answer 2

I would try to avoid the scrolling and solve navigating the sidebar in a different way. For example with pagination and an ajax-like change of the sidebar.

Answer 3

You seem to already know the pros and cons of each type so there is not much too add. As you said some sites need 2 scrollbars while most need one.

I would add another idea which is a cross between the 2 you mentioned. You can make a statically positioned sidebar (css, position:fixed) and then you would still have the sidebar stay in place but with only one scrollbar. This would be a bit less confusing to users and is good as long as the sidebar content is shorter than the page.