View Example (Requires Netscape Communicator 4.03)

USING THE SCROLLABLE COMPONENT

<script language=Javascript1.2 src=/old?u=http%3A%2F%2Fdeveloper.iplanet.com%2Fdocs%2Fexamples%2Fdynhtml%2Fscrollable%2Fscrollable.js&y=1999></script>

<script language=javascript1.2 >
  c= new Scrollable(document.homepage);
</script>

In this example, the first line loads the component. Then we open a layer containing Netscape's home page.
Finally, we create a Scrollable instance with the newly created layer as an argument. The scrollable instance
takes care of displaying the scrollbars and updating them if the content of the layer changes.
 
REFERENCE
 

  Constructor:

•   new Scrollable(clip,url)

   Clip can contain the member top,left,bottom,right,width and height.
   You can supply only some of these parameters.
   url is the location of a page to load.
   These two parameters are optional.
   If you want to set a url without giving any position information, use new Scrollable({},url);
 

• new Scrollable(layer,url)

   Here, the Scrollable object is created by using an existing layer, and adding
   scrollbars to it.

  Note: These constructors _must_ be called before the page finishes loading.
 

 Static members of the constructor:

•   Scrollable.basePath : a url used to find the images used by this component.

  Default value: "images/". The url must be terminated by a '/'

  There are several other static members that can be used to set your own images to be
  used by the scrollbars, or to change the reaction time. Look at the beginning of the source if you want to try this.
 

 Instance Methods:

•   refresh() : refresh the state of the scrollbars. You usually don't need to call this,  since the scrollbars are updated periodically without intervention.
•   scrollTo(x,y) : scroll to the given position.
•   scrollBy(x,y) : scroll by the given position.

 Properties:

•   layer : Read only. Return the container layer. Use this layer to move or resize the scrollable component.

•   main  : main is the actual layer that is being scrolled. Use this layer to change the content of the layer, with main.src=/old?u=http%3A%2F%2Fdeveloper.iplanet.com%2Fdocs%2Fexamples%2Fdynhtml%2Fscrollable%2F%2C&y=1999 main.load() or main.document.write()

    Note that you can change the value of main.
     scrollable.main=document.mylayer is valid, and will remove the scrollbars from the
  current main layer, and put them into the new main layer.

•   hbar : define the visibility of the horizontal scrollbar.

  Valid values are 'show', 'hide', or 'auto'. The strings must be in lowercase.

•   vbar : define the visibility of the vertical scrollbar. See above.
•   vincr: define the vertical increment used when you click on the up/down buttons.
•   hincr: define the horizontal increment.
•   pageXOffset : horizontal offset for the main layer.
•   pageYOffset : vertical offset for the main layer.

These two properties can be set, and have the same effect as using scrollTo()

More generally, all the properties above can be set, with the exception of layer.
 
SOURCE

    You can find the javascript source here
    The complete archive with the icon used by the scrollbars can be found here.

---

Related Readings:

• Frequently Asked Questions: Find the answers to your questions on Internet technologies.
• Documentation: A library of technical information.
• Developer Central: Collections of developer resources organized by Internet technology areas.

Any sample code included above is provided for your use on an "AS IS" basis, under the Netscape License Agreement - Terms of Use