Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Scrolling Viewports
By Scott Isaacs

In this article, we explain how to create custom scrolling viewports. We take you from building scrolling regions using CSS (Internet Explorer 4.0) through building a custom cross-browser solution that allows you to create your own custom scroll widgets.

Before showing you how to create the scrolling viewport, first you need understand the difference between the physical size of the viewport and the logical size of the content. The physical size represents the size of the viewport on the screen. The logical size of the content represents the complete width and height of all the contents. In the image below notice how the logical contents can be larger than the viewport. The logical size of the contents is normally determined by the browser. The size of the viewport can be controlled with CSS-2.

The viewport can also be considered similar to a window providing a view into the contents being displayed. By moving the logical document up and down you create scrolling. These concepts also apply to your browser itself. The area of the document you are viewing is contained within the viewport, while the scrollbars move the document up and down changing what you are seeing. When this is applied to contents within the page, you create a scrolling viewport in your document.

Next we show you the CSS-2 properties that make it easy to add scrolling viewports to your page.