# Custom scrollbar AS

**URL:** <https://forum.kirupa.com/t/custom-scrollbar-as/160417>\
**Category:** flash\
**Created:** [August 25, 2005, 7:38pm UTC](https://forum.kirupa.com/t/custom-scrollbar-as/160417 "2005-08-25T19:38:54Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![waxpants](https://avatars.discourse-cdn.com/v4/letter/w/aca169/32.png) [@waxpants](https://forum.kirupa.com/u/waxpants)\
**Post date:** [August 25, 2005, 7:38pm UTC](https://forum.kirupa.com/t/custom-scrollbar-as/160417/1 "2005-08-25T19:38:54Z")

</div>

Normally I would use the scrollbar component and skin it to suit my needs but today I needed to make a custom scrollbar because I didn’t want the slider part to expand or contract.

So… I went ahead and did it and it works just fine 😛 It didn’t even take me very long to do so I must be improving a bit.

But it’s times like these, where I’m proud of myself for making a breakthrough that I need to humble myself and try to expand my understanding of AS even further.

So I ask myself, “What would one of the real AS hotshots at [Kirupa.com](http://Kirupa.com) do?” And things like AS 2.0 and prototypes and other things I don’t understand at all start flashing through my head.

To start here’s what I wrote to operate my scrollbar:

```auto
slidePerc = 0;
newsScroll.upArrow.onPress = function() {
	newsScroll.upArrow.gotoAndStop(2);
	arrowScroll("up");
};
newsScroll.upArrow.onRelease = newsScroll.upArrow.onReleaseOutside = function() {
	newsScroll.upArrow.gotoAndStop(1);
	arrowScroll("none");
};
newsScroll.downArrow.onPress = function() {
	newsScroll.downArrow.gotoAndStop(2);
	arrowScroll("down");
};
newsScroll.downArrow.onRelease = newsScroll.downArrow.onReleaseOutside = function() {
	newsScroll.downArrow.gotoAndStop(1);
	arrowScroll("none");
};
function arrowScroll(dir) {
	this.onEnterFrame = function() {
		slidePerc = ((newsBox.scroll-1)/(newsBox.maxscroll-1));
		newsScroll.scrollArea.scroller._y = (newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height)*slidePerc;
		if (dir == "up") {
			newsBox.scroll--;
		} else if (dir == "down") {
			newsBox.scroll++;
		} else if (dir == "none") {
			delete onEnterFrame;
		}
	};
}
newsScroll.scrollArea.scroller.onPress = function() {
	newsScroll.scrollArea.scroller.startDrag(false, 0, 0, 0, newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height);
	arrowDrag(true);
};
newsScroll.scrollArea.scroller.onRelease = newsScroll.scrollArea.scroller.onReleaseOutside=function () {
	newsScroll.scrollArea.scroller.stopDrag();
	arrowDrag(false);
};
function arrowDrag (cond){
	this.onEnterFrame = function(){
		if(cond){
			slidePerc = newsScroll.scrollArea.scroller._y/(newsScroll.scrollArea._height-newsScroll.scrollArea.scroller._height);
			newsBox.scroll = (newsBox.maxscroll*slidePerc)+1;
		}else{
			delete onEnterFrame;
		}
	}
}

```

Now what would you do to make it smaller/better/smarter/whatever?