jsScrollbar

Preparation

Before initializing the scrollbar, you must create a jsScroller object. So if you haven't, follow the previous tutorial and find out how!

First thing is the HTML:

<div id="Scrollbar-Container">
  <div class="Scrollbar-Up"></div>
  <div class="Scrollbar-Down"></div>
  <div class="Scrollbar-Track">
    <div class="Scrollbar-Handle"></div>
  </div>
</div>

Again, "Scrollbar-Container" can be change to anything you want, you just need to be able reference this element like with jsScroller. The other divs inside have to have those class names, however. The only ones required for the scrollbar to work are the track and handle. The up and down buttons are not necessary. The up, down, and handle buttons can also be images if you desire.

As far as CSS goes, the only things you have to set are the height and positioning for the track and handle. The track must be absolute or relative, and the handle must be absolute.

Constructor

new jsScrollbar(jsScroller, scrollbarContainer, auto, eventHandler);

jsScroller is an instance of jsScroller.js, scrollbarContainer is the element that contains all the components for the scrollbar, auto is a boolean value that when set to true makes the whole scrollbar disappear when the content doesn't fill up the whole area and when set to false makes just the handle disappear, and eventHandler is a function that can change the look fo the scrollbar components when they are clicked on and such. This will be discussed a little later in the tutorial.

An example of implementation:

//You have to have a jsScroller along with the jsScrollbar
var wrapper = document.getElementById("Scroller");
var barWrapper = document.getElementById("Scrollbar-Container");
var scroller = new jsScroller(wrapper, 400, 200);
var scrollbar = new jsScrollbar(scroller, barWrapper, true);

Methods

This uses the same .scrollTo, .scrollBy, .reset, and .swapContent functions as jsScroller. They should be used in place of the jsScroller functions.

The Event Handler

The fourth parameter that you can pass to jsScrollbar is a reference to a function that can change the way the scrollbar looks when its clicked on and such. Two parameters are passed: the object that generated the action, and the type of action (mouseup, or mousedown). You could also add your own parameter for getting the event object if you so desire.

An example of an event handler:

function scrollbarEvent (o, type) {
  if (type == "mousedown") {
    //if its the track, make its color #E3E3E3, otherwise make it #BBB
    if (o.className == "Scrollbar-Track")  {
      o.style.backgroundColor = "#E3E3E3";
    } else {
      o.style.backgroundColor = "#BBB";
    }
  } else {
    //return the colors for when the mouse button is let off
    if (o.className == "Scrollbar-Track") { 
      o.style.backgroundColor = "#EEE";
    } else {
      o.style.backgroundColor = "#CCC";
    }
  }
}

To pass this to the constructor, just use the function name as a variable name. So in this case I would pass scrollbarEvent as my fourth argument.

Examples

example2.html, example3.html, and example4.html

Quirks

Using img tags isn't recommended for the scrollbar handle. Most browsers start their little dragging action, and don't have a way to cancel it like IE does. I prefer to use divs with a background image.

~~Safari selects all the text when trying to drag the handle. I hope someone can enlighten me and tell me how to fix this!~~

Everythings peachy keen as far as I know!

Useful Properties

These are properties that you can access that may help you in making scripts:

.auto, .eventHandler

The arguments passed to the constructor. These can be changed at any point if you desire

._up, ._down, ._yTrack, ._yHandle

References to the components of the scrollbar.

._disabled

A boolean value that sets whether the scrollbar can be clicked on or not. This is automatically set by the script, but it can be changed at any point if you wish to disable the scrollbar.

Files

Related