jsScroller

Preparation

Before initializing the scroller, there are a few things that have to be set up in order for it to work properly.

First thing is the HTML:

<div id="Scroller">
  <div class="Scroller-Container">
    Insert Text here!
  </div>
</div>

Now, "Scroller" can actually be change to anything you want, you just need to be able reference this element. The div with the class Scroller-Container, however, must have this class name. If it doesn't, the script won't be able to find the content and it will break.

The next bit, is the CSS:

#Scroller {
  position: relative;
  width: 400px;
  height: 200px;
  overflow: hidden;
}
.Scroller-Container {
  position: absolute;
}

This is all the CSS that is required. #Scroller must have some sort of positioning set in the CSS, and it must have overflow set to hidden. The width and height can be set to anything. Scroller-Container must have position set to absolute, and this is all that is needed.

Constructor

new jsScroller(scrollerWrapper, viewableWidth, viewableHeight);

This is what you use when initializing the jsScroller object. It's quite simple really. First, you have to assign it to a variable when making a new jsScroller. The scrollerWrapper is the HTML element that houses the Scroller-Container div. viewableHeight and viewableWidth are the viewable area od the scroller.

An example of implementation:

var wrapper = document.getElementById("Scroller");
var scroller = new jsScroller(wrapper, 400, 200);

Methods

.scrollTo(x, y)

This just makes the content jump to the specified coordinates

.scrollBy(x, y)

This moves the content by a specified amount. Positive values make it move up and left. Negative values make it scroll down and right;

.startScroll(x, y)

This is the same as scrollBy except it repeats over and over until stopScroll is called.

.stopScroll()

This stops startScroll.

.swapContent(scrollerWrapper, viewableWidth, viewableHeight)

This lets you switch what area the scroller controls. This is done in the same manner as when calling the constructor, except viewableHeight and viewableWidth are not required.

.reset()

This just sets everything back to 0 and recalculates.

Some examples:

scroller.scrollTo(0, 120);

//scrolls up 5px
scroller.scrollBy(0, 5);

//events on an image
<img src="up.png" onmouseover="scroller.startScroll(0, 5)" 
onmouseout="scroller.stopScroll()" />

Examples

example1.html

Quirks

Horizontal scrolling doesn't work correctly. I haven't The slightest idea how to fix it either. No one uses horizontal scrolling anyways, so I'm not in a hurry to figure it out.

Useful Properties

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

.viewableWidth, .viewableHeight

The viewable dimensions of the scroller, as defined by the arguments passed to jsScroller.

.totalWidth, .totalHeight

The total dimensions of the scroller content.

._x, ._y

The position of the content in the scroller. These are actually negative values, so when using them, you probably want to put a - sign in front to make it positive.

Files