Theme Writing Guide

The way the whole system works is that is creates elements with certain class names that you can style with css, that act like scrollbars. This page documents what each css class is, and what kind of stuff you can do with it. Examples are at the bottom. You can also get them at jsfiddle

scrollRoot

Just the element you apply the script too. Nothing special.

contentWrap

A wrapper put around your content so we can find out the actual size of your content, and move it.

drag

All of the draggers are given this class. This is where the bulk of your scrollbar theme-ing will be. There is also dragX and dragY for specific draggers.

dragConX and dragConY

This is the dragger container. Again, not anything too special. Read the css for it to find out what it does.

scrollingActive

A class added to the body when scrolling is in action.

dragXUsed and dragYUsed

Classes added to the scrollRoot if the axis is used.

Examples

/* Completely red rectangular scrollbars */
.drag {
    background: #ff0000;
}

/* Round blue scrollbars */
.drag {
    background: #0000ff;
    border-radius: 10px;
}