Help with simple scrollbar issue


I’m trying to make a fullscreen flash scroll bar and have been making some progress, in terms of adjusting a scrollbar to a fullscreen. Anyway, I’ve hit a bit of a stumble. In my function Stage.onResize I’m trying to make the scrollbar dragger a percentage of the amount of content which is shown on the screen as the picture below shows.

The problem is that when you scroll down for some reason the _y position of the scroller is creating a gap, which seems to become bigger the more you drag the scroller down (make sure you have the content displayed in a box like the picture, otherwise the scroller won’t show because all the content is on screen… like a scroller should do!).

So the red line is aligning to the scroll dragger’s y position to show my point.

What I want to be able to do is when you drag the scroll dragger I want it to stop when you get to the bottom, at the moment it seems to be going to the bottom and beyond. I want it to stop when you get to the bottom of the content (all content shown on screen) like a normal html scroller.

It might be important to note that I have changed the registration points a little, as you’ll see in the fla.

Any help on this would be greatly appreciated.

Here are a couple of pictures to illustrate the problems and source files and code.

//import for mac scrollwheel operation
import com.pixelbreaker.ui.MouseWheel;

//Align at top left?
Stage.align = "TL";
Stage.scaleMode = "noScale";
// Padding between top of stage and content **MAKE THIS A PERCENTAGE**
var contentPadding = 30;
//Set the position of the content in the middle of the screen upon movie load
content_mc._x = Stage.width/2;
content_mc._y = contentPadding;
//Position the scroller to the right and to the height of the stage upon movie load
scroller_mc._x = Stage.width-scroller_mc._width/2;
scroller_mc._y = 0;
scroller_mc._height = Stage.height;
// y position on top of the content box
var topContentBox = content_mc._y;
//Create new listener object to listen to stage resize
var stageResizeListener:Object = new Object();
//Everytime the stage is resized...
stageResizeListener.onResize = function() {

    // Amount of content in pixels displayed on screen
    var contentOnScreen = Stage.height-topContentBox;
    // Percentage of content shown on screen
    var pctContentOnScreen = contentOnScreen/content_mc._height;
    //Position the scroller to the right and to the height of the stage
    scroller_mc._x = Stage.width-scroller_mc._width/2;
    //scroller_mc._y = Stage.height/2
    //Set the position of the content in the middle of the screen
    content_mc._x = Stage.width/2;
    //scroller_mc.scrollerBar_mc._height = Stage.height;
    scroller_mc.scrollerBar_mc._height = Stage.height;
    scroller_mc.scrollerDragger_mc._y = 0;
    if (pctContentOnScreen<1) {
        scroller_mc.scrollerDragger_mc.enabled = true;
        scroller_mc.scrollerDragger_mc._visible = true;
        scroller_mc.scrollerDragger_mc._height = pctContentOnScreen*(Stage.height-100)/2;
        scroller_mc.scrollerDragger_mc._y = 0;
    } else {
        scroller_mc.scrollerDragger_mc.enabled = false;
        scroller_mc.scrollerDragger_mc._visible = false;
    //pctDraggerOnScreen = scroller_mc.scrollerDragger_mc._height / Stage.height;
    //this.scroller_mc.scrollerDragger_mc._y = topContentBox;

//create a listener for when the stage is altered
scroller_mc.scrollerDragger_mc.onPress = function() {
    //**WORKING ON THIS!!**//

scroller_mc.scrollerDragger_mc.onRelease = scroller_mc.scrollerDragger_mc.onReleaseOutside=function () {

onEnterFrame = function () {
    holder_mc._y = scroller_mc.scrollerDragger_mc._y;