Problems with AS3 scrollbar script - actionscript-3

Question

I have this symbol for a scrollbar in adobe flash:
The instance name of the dark part is handle, and that of the lighter bar is bar. The symbol is an instance of the Scroll class:
package ui {
import flash.display.MovieClip;
import flash.events.MouseEvent;
public class Scroll extends MovieClip{
public static const VERTICAL = 0;
public static const HORIZONTAL = 1;
protected var _handleRatio = 1;
protected var _orientation = VERTICAL;
protected var _mousePrevPos:int;
protected var _handleMargin:int;
protected var _container:MovieClip;
protected var _containerInitialPosition:int; //added after update #2
public function Scroll(container:MovieClip, visibleLength:int, orientation:int = VERTICAL) {
_orientation = orientation;
_container = container;
var containerLength:int;
switch(_orientation){
case VERTICAL:
rotation = 0;
containerLength = container.height;
_containerInitialPosition = container.y; //added after update #2
break
case HORIZONTAL:
rotation = - 90;
containerLength = container.width;
_containerInitialPosition = container.x; //added after update #2
break;
default:
throw new Error('Unknown orientation');
break;
}
if((_handleRatio = visibleLength/containerLength) > 1)
_handleRatio = 1;
handle.height = _handleRatio*height;
_handleMargin = handle.y;
handle.addEventListener(MouseEvent.MOUSE_DOWN, _startDrag, false, 0, true);
}
protected function _startDrag(e:MouseEvent){
stage.addEventListener(MouseEvent.MOUSE_UP, _stopDrag, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_MOVE, _dragHandle, false, 0, true);
_mousePrevPos = mouseY;
}
protected function _stopDrag(e:MouseEvent = null){
stage.removeEventListener(MouseEvent.MOUSE_UP, _stopDrag);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, _dragHandle);
_mousePrevPos = NaN;
}
protected function _dragHandle(e:MouseEvent){
_moveHandle(mouseY - _mousePrevPos);
_mousePrevPos = mouseY;
}
protected function _moveHandle(moveDifference:int){
if(moveDifference > 0 && !(handle.y + handle.height + _handleMargin > bar.height)){
if(!(handle.y + handle.height + moveDifference + _handleMargin > bar.height))
handle.y = handle.y + moveDifference;
else
handle.y = bar.height - handle.height - _handleMargin;
}
if(moveDifference < 0 && !(handle.y < _handleMargin)){
if(!(handle.y + moveDifference < _handleMargin))
handle.y += moveDifference;
else
handle.y = _handleMargin;
}
switch(_orientation){
case VERTICAL:
_container.y = _containerInitialPosition -((handle.y-_handleMargin)/(bar.height-_handleMargin*2)*_container.height);
// since update #2, the calculated y position is subtracted from the initial y position
break
case HORIZONTAL:
_container.x = _containerInitialPosition -((handle.y-_handleMargin)/(bar.height-_handleMargin*2)*_container.width);
// since update #2, the calculated x position is subtracted from the initial x position
break;
default:
throw new Error('Unknown orientation');
break;
}
}
public function resize(newWidth, newHeight){
switch(_orientation){
case VERTICAL:
width = newWidth;
height = newHeight;
break
case HORIZONTAL:
rotation = 0;
width = newHeight;
height = newWidth;
rotation = -90;
break;
default:
throw new Error('Unknown orientation');
break;
}
}
public function scrollHandle(e:MouseEvent){
_moveHandle(-e.delta);
}
}
}
As you can see, you can create both horizontal and vertical scrollbars. Now, there are two problems with the scrollbar:
For some reason, when dragging the handle up/left with the mouse, the handle moves far slower than the cursor
Also, when you scroll a horizontal scrollbar a little to the right, the left part of the container is cut off, and you can't scroll back to it anymore solved now, see update #2
I really don't know what causes these problems, so can anyone please help me or at least point out where the errors in my code are?
Update
Some extra information to help explain the code:
This is a sketch of a situation where a vertical scrollbar would be needed. The scrollbar would be initiated like so:
var scrollBar:Scroll = new Scroll(container, mask.height, Scroll.VERTICAL);
When the handle of the scrollbar is dragged/scrolled down, the container is moved upwards, so that you get to see a lower part of the contaienr - and vice versa: if you scroll up, the container is moved down.
If you'd want to create a horizontal scrollbar, apart from changing Scroll.VERTICAL into Scroll.HORIZONTAL, you'd pass mask.width as visibleLength instead of mask.height.
I suppose container doesn't neccessarily have to be a MovieClip but can be any DisplayObject.
Also, I'm not using startDrag() so that I can drag the handle and scroll the handle up and down with just one method (_moveHandle()).
Update #2
I solved problem #2: the left part of the container was cut off because when the container hadn't been scrolled yet, the container's x position was somewhere in the middle of the stage. When it was scrolled a little bit to the right, I forgot to set the container's x position to the calculated x position + the initital x position. I updated the code above, with comments behind the new parts so you can see what I changed.
Update #3
You can see a flash file making use of the scrollbar here: http://host.undeadzone.net/scrollBarTest.swf
To reproduce issue #1, do the following:
grab the handle with the mouse and slowly drag the slider down, one notices that the mouse position relative to the slider stays constant. (if you clicked at the top most edge of the handle to start dragging, the mouse will still be at the top most edge when the handle reaches the bottom of the screen. this is the expected behaviour, all good.
Now do the opposite (it doesn't matter if you release the mouse
after doing step 1) and drag the handle upwards slowly. This time,
the position of the mouse relative to the handle changes. If one initiated the drag at the top most edge of the handle and starts
dragging up, the handle does not keep up with the mouse and the
mouse position (relative to the handle) will be above the handle
after dragging, even though it started the dragging within the
handle.
The source code:
http://host.undeadzone.net/scrollBarTest.zip

Answer 1

To fix 1-st issue add e.updateAfterEvent:
protected function _dragHandle(e:MouseEvent){
_moveHandle(mouseY - _mousePrevPos);
_mousePrevPos = mouseY;
e.updateAfterEvent();
}
UPDATE
mouseY returns Number not int.
Replace this line:
protected var _mousePrevPos:int;
with this:
protected var _mousePrevPos:Number;
in Scroll class.
UPDATE #2
Replace
protected function _moveHandle(moveDifference:int){
with
protected function _moveHandle(moveDifference:Number){