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.

  • 2
    The reason Google Code and Reader are different is because one is a web site and one is a web app, with differing use cases and design targets. In Google Reader, it's not a "sidebar" - it's more like the panel metaphor in desktop apps.
    – Rahul
    Commented Aug 30, 2010 at 15:51
  • This very question is literally driving me mad last three days.
    – shabunc
    Commented Apr 2, 2012 at 19:36

3 Answers 3


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.


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.

alt text

  • 2
    I have to say: meh. You'd be hiding content behind a click, and if it's navigational content, that's extra-deadly.
    – Rahul
    Commented Aug 30, 2010 at 13:59

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.

  • Isn't it position:fixed in CSS?
    – Rahul
    Commented Aug 30, 2010 at 8:30
  • @Rahul Yup, fixed is relative to the browser window (i.e., "same place"), while static is "no position".
    – jensgram
    Commented Aug 30, 2010 at 10:54
  • sorry, fixed. In my defense it was almost 4 am when I wrote this :)
    – Sruly
    Commented Aug 30, 2010 at 12:02
  • The problem with fixed is if you have a header, as you scroll you'll have ~200px empty at the top of the sidebar, unless you add some Javascript, like Salon does with their sidebar ad Commented Aug 30, 2010 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.