The MiniScroll Object

This object picks up exactly where the Scroll Concepts lesson left off. It creates a single object that scrolls content up, down, left, or right in the simplest manner possible.

This object accepts 2 DynLayers (window,content) and and finds the offsetWidth, and offsetHeight, and has easy-to-use methods built in to scroll the layer. It also double checks to make sure the content is larger than the window before scrolling.

Usage of MiniScroll:

objectName = MiniScroll(window,content)  // accepts 2 dynlayers

Example:

function init() {
	scrollWindow = new DynLayer('scrollWindowDiv')
	scrollContent = new DynLayer('scrollContentDiv','scrollWindowDiv')
	myscroll = new MiniScroll(scrollWindow,scrollContent)
}

Methods:

There's 5 methods that do exactly what you'd expect: up(), down(), left(), right(), and stop()

Most likely you'll want to utilize these methods according to the Mouse Click Animation technique. For example you can create 2 hyperlinks which are set up like this:

<A HREF="javascript:// Scroll Up" onMouseDown="myscroll.up()" onMouseUp="myscroll.stop()" onMouseOut="myscroll.stop()">Scroll Up</A>
<BR><A HREF="javascript:// Scroll Down" onMouseDown="myscroll.down()" onMouseUp="myscroll.stop()" onMouseOut="myscroll.stop()">Scroll Down</A>

The results will be when you hold the links, the content layer will slide, and when they are released the layer will stop in mid-slide.

Properties:

• enableVScroll - boolean showing whether it can scroll vertically
• enableHScroll - boolean showing whether it can scroll horizontally
• inc - stepping increment (how many pixels to move each step) - 8 by default
• speed - speed of scrolling in milliseconds, 20 by default

Example: miniscroll1.html [source] - for an example using the MiniScroll Object.

Example: miniscroll2.html [source] - for an example which scrolls an image up, down, left, and right.

Source Code

miniscroll.js

Taking It Even Further

In the Scroll2 object I take this concept to the full extreme. It's a rather large JavaScript object which generates an actual scrollbar by which you can scroll the content layer. Although there is a lot more code in that object, the basic functionality is exactly same as I've discussed here. If you look closely enough you will find that it generates a content layer and a window layer, finds the offset height, and implements a mechanism to scroll the layer. The Scroll2 is the second version of the original Scroll Object.

Home	Next Lesson: ScrollWindow