# Easing ScrollBar - Based on Kipura's simple one

**URL:** <https://forum.kirupa.com/t/easing-scrollbar-based-on-kipuras-simple-one/311720>\
**Category:** Uncategorized\
**Created:** [July 14, 2010, 5:26pm UTC](https://forum.kirupa.com/t/easing-scrollbar-based-on-kipuras-simple-one/311720 "2010-07-14T17:26:55Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpmorgan](https://avatars.discourse-cdn.com/v4/letter/j/dc4da7/32.png) [@jpmorgan](https://forum.kirupa.com/u/jpmorgan)\
**Post date:** [July 14, 2010, 5:26pm UTC](https://forum.kirupa.com/t/easing-scrollbar-based-on-kipuras-simple-one/311720/1 "2010-07-14T17:26:55Z")

</div>

As a way of showing my gratitude for Kipura’s ‘Simple custom scrollbar’, I thought I would upload my amended version ‘Easing scrollbar’.

```auto
scrolling = function () {
	var scrollHeight:Number = scrollTrack._height;
	var contentHeight:Number = contentMain._height;
	var scrollFaceHeight:Number = scrollFace._height;
	var maskHeight:Number = maskedView._height;
	var initPosition:Number = scrollFace._y = scrollTrack._y;
	var initContentPos:Number = contentMain._y;
	var finalContentPos:Number = maskHeight - contentHeight + initContentPos;
	var left:Number = scrollFace._x;
	var top:Number = scrollTrack._y;
	var right:Number = scrollFace._x;
	var bottom:Number = scrollTrack._height - scrollFaceHeight + scrollTrack._y;
	var dy:Number = 0;
	var speed:Number = 10;
	var moveVal:Number = (contentHeight - (maskHeight / 1.3)) / (maskHeight - (scrollFaceHeight / 2));
	
	contentMain.setMask(maskedView);
	
	scrollFace.onPress = function() {
		var currPos:Number = this._y;
		startDrag(this, false, left, top, right, bottom);
		this.onEnterFrame = function() {
			dy = -((scrollFace._y - scrollFaceHeight) * moveVal);
			contentMain._y -= (contentMain._y - dy)/5;
		};
	};
	scrollFace.onMouseUp = function() {
		stopDrag();
		//delete this.onEnterFrame;
	};
	btnUp.onPress = function() {
		this.onEnterFrame = function() {
			if (contentMain._y + speed < maskedView._y) {
				if (scrollFace._y <= top) {
					scrollFace._y = top;
				} else {
					scrollFace._y -= speed / moveVal;
				}
				contentMain._y += speed;
			} else {
				scrollFace._y = top;
				contentMain._y = maskedView._y;
				delete this.onEnterFrame;
			}
		};
	};
	btnUp.onDragOut = function() {
		delete this.onEnterFrame;
	};
	btnUp.onRelease = function() {
		delete this.onEnterFrame;
	};
	btnDown.onPress = function() {
		this.onEnterFrame = function() {
			if (contentMain._y - speed > finalContentPos) {
				if (scrollFace._y >= bottom) {
					scrollFace._y = bottom;
				} else {
					scrollFace._y += speed / moveVal;
				}
				contentMain._y -= speed;
			} else {
				scrollFace._y = bottom;
				contentMain._y = finalContentPos;
				delete this.onEnterFrame;
			}
		};
	};
	btnDown.onRelease = function() {
		delete this.onEnterFrame;
	};
	btnDown.onDragOut = function() {
		delete this.onEnterFrame;
	};
	
	if (contentHeight < maskHeight) {
		scrollFace._visible = false;
		btnUp.enabled = false;
		btnDown.enabled = false;
	} else {
		scrollFace._visible = true;
		btnUp.enabled = true;
		btnDown.enabled = true;
	}
};
scrolling();

```

Hope you find this useful 🙂

Joe