While I was snooping around the web the other day looking for some ideas on how to contain a large amount of text into a lightbox effect I decided on using a javascript method of calling the content of a hidden div (display: none). The problem was that the content was opening the lightbox overlay at about 1500 pixels tall which made it very odd to scroll manually and view it. I needed a way to make the contents of the div it was displaying ‘scrollable’.

Here’s what I did and it works great. In fact, you can use it on any block element by modifying your CSS.

First, let’s go over the div element so you get the picture.

<div id="popup" style="width: 700px; height:500px; display: none;">All the content here</div>

Now, what I found is that I had to do this styling ‘inline’ since IE was buggy about it and FF didn’t care one way or the other. So, after fiddling with it I gave up and just styled the content div ‘inline’ instead of using the exernal stylesheet.

By limiting the height you create the need in your CSS for the ‘overflow:auto’ statement which is what forces the scrollbars. Here’s the overflow parameters:

• overflow: auto – This will create a scrollbar – horizontal, vertical or both only if the content in the block requires it. For practical web development, this is probably the most useful for creating a scrolling area.
• overflow: scroll – This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
• overflow: visible – This will cause the block to expand to view the content.
• overflow: hidden – This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.

Since I was using a lightbox effect (the FaceBox script from Dynamic Drive) the styling for the overlay box was provided through an external CSS stylesheet that accompanies the script. In its default it didn’t provide for the scrollbars. So here’s some quick CSS that shows how to implement this on any <div>

<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
-->
</style> 

And the HTML to make it work in ‘normal’ situations whereas our <div> is assigned a class from the CSS above. Note that the <div> must have a height parameter in the CSS which is what forces the display to have scrollbars:

<div>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href="index.php">link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div> 

This is a great way to have scrollable content in various locations of your pages. Using a bit of javascript you could also populate the box with different content via ajax calls and external files.