How to set up the browser scrollbar to scroll part of a page?

Question

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?

Answer 1

To put scroll bars on an element such as a div:

<div style="overflow-x: auto; overflow-y: auto;>the content</div>

If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.

Answer 2

That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.

Answer 3

This can be done in CSS using the "position:absolute;" clause

Here is an example template:

http://www.demusdesign.com/bipolar/index.html

From http://www.demusdesign.com/

Answer 4

The browser is scrolling the page, its just that part of it is fixed in position.

This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.

Answer 5

They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.

Answer 6

In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.

In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.

And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).

Answer 7

To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:

Firebug addon for Firefox

Answer 8

It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.

Answer 9

You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.

As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.