Once this value is obtained, we can now create the real scrollbar. To create scrollbars, we wrote a
createScroll function. This function has 3 required and one optional argument:
The first argument, horizontal, is a boolean which defines whether a horizontal or vertical scrollbar is being
created (true for horizontal, false for vertical). The size specifies how wide or tall a scrollbar to create and increments
define the number of steps the scrollbar has starting from 0. The last argument is optional and is used to create absolutely
positioned scrollbars. To use CSS-Positioning on your scrollbar, pass true for this argument. This function
builds the appropriate HTML and adds it to your document. The return value for this function is the
scrollbar element. Below is the complete createScroll() function:
This creates a scrollbar with no default action (eg., nothing happens when you scroll). To control the scrollbar, you manipulate the returned element. Since we are using the built-in scrolling that is supported by Internet Explorer, we also get the scroll events and properties for the scrollbars position for free. When an element displays a scrollbar, it automatically exposes an onscroll event, and scrollLeft and scrollTop properties.
Therefore, to add an action to the scrollbar, you just bind to this event:
If you are running Internet Explorer 4.0, you can see a demonstration that uses horizontal and vertical scrollbars to scale an image. After the demonstration, you can review the complete source code for this example and read why we can't create a Netscape version of the scrollbar.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.