Inside Technique : Scrolling Viewports : Cross-browser Viewport

To add scrolling viewports to both browsers, you need to define a container for both the viewport and for the contents within the viewport. We do this by nesting two DIV's. The outer DIV is defined with a fixed width and height. To prevent the default overflow behavior from being visible, we use the CSS clip property to ensure the real size of the viewport is maintained. Within this DIV we create a second DIV to contain the contents. This nested DIV represents the logical size size of the contents. To add scrolling, we just move the top position up and down.

Below we show you how the two DIV's are created:

<DIV STYLE="position: absolute; width: 300; height: 100; 
            clip: rect(0 300 100 0);">
  <DIV ID="s1" STYLE="position: absolute;width: 300">
    Contents
  </DIV>
</DIV>

The CSS clip property is used to constrain the view of the viewport. The order of the arguments to the rect value are top, right, bottom, left. Therefore rect(0 300 100 0) clips the positioned element to a 300x100 box. The combination of the outer DIV with the clip property and the inner DIV are functionally equivalent to using a single DIV with overflow: hidden. You are now halfway to creating the scrolling viewport. Next, you need to add widgets to the page to enable scrolling. These widgets work by moving the inner DIV up and down within the viewport.

On the last page, we provide a complete example for adding cross-browser scrolling viewports to your page.

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