Scrolling DIVs

These days, most Web developers are discouraged from using frames (with good reason). However, users still like the functionality they provide. FRAME and IFRAME are handy scrolling containers, but you may not know that scrolling DIVs can accomplish most of the same things?without the headaches of frames.

Frames are most commonly used to keep some elements stationary while scrolling others. For example, an ASP page might produce a large table that would make the user scroll far past the navigation bars. The table could be placed in a scrolling DIV, where it will scroll just like it was in an IFRAME!

 
stuff more stuff
stuff more stuff

The CSS-2 attribute OVERFLOW:auto scrolls the element when needed; scrollbars are hidden when they are not needed. OVERFLOW:scroll forces scrollbars to appear. The OVERFLOW attribute is described here: http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping.The HEIGHT attribute must then be set so the DIV will run out of space and begin to scroll.

Scrolling DIVs can be used instead of framesets to keep navigation bars stationary while content scrolls:

 
I'm the banner and global navigation.
I'm the left nav bar.

I'm the content. I scroll if I need to.

I frequently use a scrolling DIV surrounded by a table cell instead of a read-only TEXTAREA:

 
Choose Me
Choose Me

Of course, almost anything can go inside a DIV, like these checkboxes.

Note:OVERFLOW is supported by IE4+, but not by Navigator.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: