Simple Custom Scrollbar - Page 5

In the previous page, you finished creating your scrollbar. In this and the following page, you will learn more about how the scrollbar works.

Approach
You know that the scrolling area is going to be considerably smaller than the actual content contained in it. Our goal is to display only a small portion of our content in our viewing area. We need to provide functionality for allowing the viewer to adjust which portion of the larger content to display in the smaller viewing area.

The following diagram should help you to visualize what I will be explaining:

The height of our content is denoted by H_C, and the height of our scrollTrack is H_T. H_F refers to the height of our scrollface. Therefore, you now have an idea of our constraints. Our scrolling is constrained by the height of our content, the height of the viewing area, the height of the scroll track, and the the height of our scroll face.

Initially, a height H_V of your content is already being displayed in your viewing area. So the total height that we need to scroll is going to be H_C minus H_V. You now know the total height you have to scroll. Glancing at the above diagram, you can see that you have a distance of H_T to scroll through a height (H_C - H_T) of content.

Our relationship for scrolling so far is:

(H_C - H_V) / H_T

Let's use some real numbers. If your content is 1000 pixels tall (H_C), and both your maskedView and scrollTrack is 200 pixels tall (H_V, H_T). That means, since 200 pixels are already being displayed, you will need to scroll through 800 pixels of content. You only have 200 pixels of scrollTrack to do that in. That means, 800 pixels of content divided by 200 pixels of scrollTrack yield 4 pixels of content scrolled per 1 pixel of scrolling done by your scrollTrack.

That makes sense! Because for every pixel you scroll, you have to scroll more pixels of your content in order to get through all the content before you reach the end of your scrollTrack. We are not done quite yet.

There is a slight complication. Your scrollFace has a height also, and it takes up valuable space also! The full height of our scrollTrack cannot be used, because the bottom edge of the scrollFace stops once it reaches the bottom of your scrollTrack. That means you have to take into account the space used up by scrollFace.

Devising a relation between the scroll track's height and the scroll face's height is straightforward. The distance you move the scrollFace cannot be H_T. My next guess would be H_T - H_F. And that is our answer. Now, your modified relation between the content height, the scrollFace height, and the scrollTrack height is:

(H_C - H_V) / (H_T - H_F)

Let's revisit our example from above. If you substitute in the values for H_C, H_T, and H_F, you get 800 / 180 which is around 4.44. It's an ugly number, but good thing our computers can do this stuff better than us. Every pixel you drag your scrollFace, your content is dragged about 4.44 pixels.

All we have to do now is take into account our scrollFace's initial height so that we can offset our result by the space taken up by the scrollFace, and we have our final formula for implementing our scroll bar:

((H_C - H_V) / (H_T - H_F))

This is really the hard part of this tutorial. On the next page, I'll explain the code that takes all of the above and more and translates it into a format that Flash understands.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9