WWW FAQs: How do I add a scrollbar to part of a page?


2006-09-05: Sometimes it is desirable to allow the user to scroll part of the page separately from the rest. A web-based email reader is a good example. There's no need for buttons like "Delete This Message" to disappear off the screen simply because you are scrolling through the message itself.

Folks used to solve this problem with frames, but frames are a very poor solution, requiring the use of separate files for every piece of content, creating bookmarking problems and generally making life unpleasant for everyone.

A somewhat better solution is the more modern iframe element, which can embed another page into your document in much the same way that the object element embeds a Flash movie or audio player. I discuss this technique in detail in the article how do I include one HTML file in another?

But the best and most modern solution is CSS. This way, your scrollable content doesn't have to "live" in a separate file or require extra communication with the web server. Just set the width and height of iyour container element, usually a div, however you like with the width and height properties. Then, use the overflow CSS property to introduce scrollbars for those cases when the content is bigger than the div.

The overflow property, which can be applied to any block element but is most often applied to div, can have the following values:

1. auto will insert horizontal and vertical scrollbars if and when the content requires them. This is the most popular choice and the one we'll discuss in more detail here.

2. scroll forces scrollbars to appear, even if the content is smaller than the container. This usually isn't necessary.

3. visible forces the element to grow until the content fits. This is the default if overflow is not specified at all. Firefox and Internet Explorer react differently to this, and the CSS2 specification describes yet a third approach. So I don't recommend letting nature take its course with fixed-size div elements. If you're not sure the content will fit, and it needs to be readable, use overflow: auto.

4. hidden will simply hide any content that exceeds the dimensions of the container.

Here's a simple example of a page that contains a separately scrolled area. I'm using a very small div to clearly demonstrate the scrolling effect. The second div is floated to the right of the first one to show how easily non-scrolling content can be added to the same page.


<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 400px; border-style: solid">
<div style="float: right; padding: 20px">
<input type="button" value="Jump"><p>
<input type="button" value="Scratch"><p>
<input type="button" value="Twitch Ears">
</div>
<div style="overflow: auto; width: 200px; height: 200px">
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
</div>
</div>
</body>
</html>

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!