# Problem with Custom scroll bar with mouse wheel

**URL:** <https://forum.kirupa.com/t/problem-with-custom-scroll-bar-with-mouse-wheel/290400>\
**Category:** flash\
**Created:** [June 14, 2009, 4:11am UTC](https://forum.kirupa.com/t/problem-with-custom-scroll-bar-with-mouse-wheel/290400 "2009-06-14T04:11:38Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![montaku](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@montaku](https://forum.kirupa.com/u/montaku)\
**Post date:** [June 14, 2009, 4:11am UTC](https://forum.kirupa.com/t/problem-with-custom-scroll-bar-with-mouse-wheel/290400/1 "2009-06-14T04:11:38Z")

</div>

Hi guys, i recently doing a custom scroll bar with mouse wheel, i succes to make it scroll and wheel in internet explorer, but when it come to firefox, it can’t wheel but can scroll. I wonder how can i solve this problem.

Hope you guys can help out. thanks lot

Here is the script ( it actually the tutorial from kirupa, i remember some people have post it before, but i wonder he/she can wheel in firefox.)

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 = scrollTrack.\_x;  
var top:Number = scrollTrack.\_y;  
var right:Number = scrollTrack.\_x;  
var bottom:Number = scrollTrack.\_height-scrollFaceHeight+scrollTrack.\_y;  
var dy:Number = 0;  
var speed:Number = 10;  
var moveVal:Number = (contentHeight-maskHeight)/(scrollHeight-scrollFaceHeight);

scrollFace.onPress = function() {

var currPos:Number = this.\_y;  
startDrag(this, false, left, top, right, bottom);  
this.onMouseMove = function() {

dy = Math.abs(initPosition-this.\_y);  
contentMain.\_y = Math.round(dy\*-1\*moveVal+initContentPos);

};

};  
scrollFace.onMouseUp = function() {

stopDrag();  
delete this.onMouseMove;

};  
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.onRollOut = 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;

}

mouseListener = new Object();

mouseListener.onMouseWheel = function (delta) {

if(delta\>0)  
{

if(scrollFace.\_y - (speed) \>=top)  
{

scrollFace.\_y -= speed;

contentMain.\_y += (speed)\* moveVal;  
}  
}

if(delta\<0)  
{

if(scrollFace.\_y + (speed) \<=bottom)  
{

scrollFace.\_y += speed;

contentMain.\_y -= (speed)\* moveVal;  
}

}

}

Mouse.addListener(mouseListener);  
};  
scrolling();

thanks for helping.