Search code examples
htmlcssscrollable

How to make scrollable DIV with scrollbar outside div like on facebook?

I would like to has a scrollable div but scrollbar should be on the right side of browser as default (but not on the right side of div). I've seen that on facebook (ceter div - contentArea is scrolled by right side browser scrollbar).

Solution

  • The way Facebook does it is by having all the content that doesn't scroll have a position of fixed. This way the native browser scrollbar will appear to scroll the center area only, while it's actually the rest of the page that is fixed in position.

    A very simple example of this:

    http://jsfiddle.net/tcaVN/

    Now imagine the above, but with all non-scrollable items setup like the #header.

    EDIT

    Here is a slightly more complex example, with three columns:

    http://jsfiddle.net/tcaVN/1/