ScrollBar Object

The ScrollBar object is exactly what you think it is and more. It's a widget that looks and works like a Scrollbar - but really all it is is one layer nested inside another one, that can be dragged around. But I've also made it a 2 dimensional scrollbar, if you set the dimensions accordingly you can drag the nested layer (which I will refer to as the 'box') around anywhere within the boundary. This widget could be used by itself as a generic slider or even perhaps as a zooming widget (I'll show what I mean). The Scroll2 object uses 2 instances of the ScrollBar, one for the vertical bar, one for the horizontal bar and then synchronizes them with a ScrollWindow.



The width and height refer to the width and height of the entire widget (the outter layer), boxW and boxH are the width and height of the box (the inner layer). Then you do the usual build-css-div-activate sequence.

I've found that this object works much better in Netscape if you have the following code in the mouseMove() function in particular:

if (is.ns &&!=document) routeEvent(e)

The routeEvent() function will pass on events down through Netscape's heirarchy. For some reason a side effect of this is that if you start dragging the layer, it will continue to recieve coordinates even if your mouse goes outsite of the boundaries of the layer - the mouseMove code in Scrollbar takes control and won't let go until you release the mouse. This is a good feature actually - it makes the scrollbar work the way you'd usually want. I recommend putting the routeEvent() call in each of your mouse functions like so:

function mouseDown(e) {
	if (is.ns &&!=document) routeEvent(e)
	// other mouseDown code
	return true
function mouseMove(e) {
	if (is.ns &&!=document) routeEvent(e)

	// other mouseMove code
	return true
function mouseUp(e) {
	if (is.ns &&!=document) routeEvent(e)

	// other mouseUp code
	return true

Example: scrollbar-simple.html [source] - a simple example of the ScrollBar.

By setting the width of the scrollbar to the same as the box you get a vertical scrollbar, and conversly if the height is the same as the box you get a horizontal scrollbar.

Example: scrollbar-vh.html [source] - shows vertical and horizontal scrollbars

Setting Images

The ScrollBar allows you to define your own images that are used:


setImages() must be called before you build()

Example: scrollbar-images.html [source] - setting images

Properties, Methods, and DynLayers Summary

Property NameDescription
nameholds the name used for all the layers
wwidth of the scrollbar
hheight of the scrollbar
bgColorbackground color of the bar, default is null (transparent)
boxColorbackground color of the box, default is null (transparent)
incthe pixel increment for when you click somewhere on the bar and the box slides quickly to that spot
speedthe speed delay (in ms) for the above
boxvisinitial visibility of the box layer ('hidden','visible','inherit')
dragActivereturns true if the the box is currently being dragged

Method NameDescription
build()assembles the css and div properties to create the layers needed
activate()assigns all DynLayers and gets relevant information to allow the object to function
getXfactor()returns a value between 0 and 1 according to the x-position of the box. 0 means it's at the left boundary, 1 means it's at the right boundary
getYfactor()returns a value between 0 and 1 according to the y-position of the box. 0 means it's at the top boundary, 1 means it's at the bottom boundary

DynLayer NameDescription
lyrThe top-most layer of the ScrollWindow
boxlyrThe layer for the box
lyrcA layer that overlaps the entire scrollbar, a 'cover' layer as I call it. This is the layer that retrieves and handles all the mouse events, and prevents you from clicking on the images that comprose the scrollbar

The onScroll Event

The onScroll event is trigged whenever the box is being dragged around, or when you click on the bar and the box slides quickly to that spot. You can assign a handler to the onScroll event and use it to "do stuff" while scrolling the box.

mybar.onScroll = MyBarHandler

function MyBarHandler() {
	status = this.getXfactor()+' '+this.getYfactor()

Example: scrollbar-methods.html [source] - shows how to use the methods

The Zoom Demo

This is a pretty neat demo which mimics a common control in graphic applications where it shows a small thumbnail of an image and lets you scroll around a bigger version of the image. Take a look at the code in this example to see how I used the onScroll event to synchronize the position of the big image with the x and y factors of the scrollbar. It might not look like it at first, but the small image is in fact a scrollbar widget. I put a thumbnail image as the shade image, and a transparent red square as the box image in the setImages() call.

Example: scrollbar-zoom.html [source]

Source Code


Home Next Lesson: Scroll2 Object
copyright 1998 Dan Steinman