Web Development Tools that Enlighten
How to Create a Scroll Bar Using CSS
A frequently asked question is how to create a box with a scroll bar for displaying content. Okay, I'll tell you, but first I have to rant a bit. I just hate those little scrolling boxes. Now this is just my opinion and it's a gross over generalized one at that, but I believe that most people who want this functionality simply don't understand how web pages work. They design some lovely layout in an image editor with beautiful graphics on the left, right, top, and bottom. Everything is sliced to perfection. Now, when they start adding real content to the page, it starts pulling the graphics apart. You can read more about the exploding tables phenomenon in my rant about spans.
Since they don't understand how web pages work, they believe that, instead of fixing the page to properly display the content, they should limit the size of the content by creating a scroller. This just makes the site harder to use. Printing becomes a problem because only the visible portion of the scroller's content prints. In some browsers, the mouse wheel will not scroll the content properly. And the poor users wind up with multiple scroll bars if their browser window isn't large enough to display the full page, which just leads to a confusing interface. In almost all cases, this is simply bad web design.
Okay, I feel better now. <smile>
You can use CSS to create a scrollable box. Consider this source code:
<div style="width: 190px; height: 190px; overflow: auto; padding: 5px"> content in here </div>
Here is what that would look like and try to imagine reading this article if the entire text were in that little box:
That's all there is to it. You can put this in the body of a page, or you can place it inside another container, like a table for example. If you have a good valid reason for using a scroller, use it. If all you're doing is protecting a flawed design, consider fixing the design.