Inside Technique : Scrolling Viewports : CSS-2 Scroll Properties

Creating a scrolling region with CSS-2 is easy. However, CSS-2 properties to add scrolling are currently only supported by Internet Explorer 4.0 and later. For this reason, we first explain how to create viewports with CSS-2 then we provide a way so they run in both Internet Explorer and Netscape Navigator.

Adding scrollbars to your page is done with a combination of the CSS width, height, and overflow properties. The width and height properties define the width and height of the viewport. The overflow property defines what happens if the contents do not fit into the viewport. When the contents do not fit, you define how the overflow is handled with the following four overflow property values:

1. visible, let the contents extend the height to fit (the default)
2. scroll, always display scrollbar widgets
3. auto, only display scrollbar widgets if the contents do not fit
4. hidden, never display scrollbar widgets. The viewport clips the contents.

Below we define a viewport with CSS that displays scrollbars for the overflow content. If your browser correctly supports the overflow property, the contents will be displayed in a 350 x 100 pixel box and scrollbars are displayed. If your browser does not support overflow, the contents would normally be displayed in the ordinary flow of the document. We have server-detection that removes the scrolling region rather than display it (for the demonstration the contents are random text)

Internet Explorer 4.0 only. If the scrolling contents were included, they would be displayed in the flow of the page.

We created the scrolling viewport as follows:

<DIV STYLE="width: 350; height: 100; 
            overflow: scroll; border:1pt black solid">
contents
</DIV>

Using overflow: scroll or overflow: auto, default scrollbar widgets are displayed. Next we show you that it is possible to override the default scroll widgets with your own custom widgets.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.