An understanding of the Math/Formula behind a working scrollbar is something that every interface designer should familiarize themselves with.
For a scrollbar to work, three main variables must be made known, the “Track Distance”, the “Out of Range Content Distance”, and the resulting “Distance Ratio” of the two.
The three variables are depicted here:
Once the “Distance Ratio” is retrieve, everything is set.
The idea is that for every one pixel that that Scroller moves [downward in this case], the content will move up by one “Distance Radio” unit.
So all you need to do is to find out how far the Scroller had traveled from its original location [y coordinate in this case] and simply multiply this vertical difference by the “Distance Ratio” and since the content is moving upward, you multiple the resulting data [the y coordinate] by -1.
That’s it, it’s that simple.
Here’s a demo in Flash:
And here’s the Flash Source Code.
If you have any enquires, please send it to bracercom@hotmail.com.