An understanding of the mathematical 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: “Track Distance”, “Out of Range Content Distance”, and the resulting “Distance Ratio” between them.
The three variables are depicted here:
Once “Distance Ratio” is retrieved, 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.