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

html css scrollable
latata picture latata · Jul 1, 2011 · Viewed 26.5k times · Source

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).

Answer

Kokos picture Kokos · Jul 1, 2011

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/

Related questions

Horizontal scrollable div's in a bootstrap row

I'm trying the make a horizontal scrollable bootstrap row. The row contains customer reviews wrapped in div's. The width of each testimonial div is 33.333%. white-space: nowrap and display: inline-block doesn't work. What am I doing wrong? <div class="row"&…

Read More
Set div to remaining height using CSS with unknown height divs above and below

Is it possible to make the wrapper fill the window height (no scrolling) and the center div scrollable without messing around with pixels and javascript? <div id="wrapper"> <h1>Header</h1> <div id="…

Read More
Why is my page not scrollable?

So I have made a few pages that use the following css code: html { overflow-y: scroll; } ul.navbar { list-style-type: none; position: fixed; top: 00px; left: 00px; width: 200px; height: 700px; background-image:url('/images/B_left-background.png'); } ul.header { position: …

Read More