Bind Mouse Wheel Scrollbar

[Deadweight]

Currently I'm working on a scrollbar function. I am running into the problem of using the mousewheel. It seems that I just cannot come up with the correct calculation to fix the scrollbar on scrolling down. This is currently what I have:


$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
var scrollFix = $('#body_wrapper').scrollTop()-settings.gallery.scrollamount;
if(scrollFix < 0)
scrollFix = 0


$('#body_wrapper').scrollTop(scrollFix)
$('#scrollbar').children('div').offset({top:scrollFix})
}
else {
var scrollFix = parseInt($('#body_wrapper').scrollTop()+settings.gallery.scrollamount);
//if(scrollFix+$('#scrollbar').children('div').height() > $('#scrollbar').height())
// scrollFix = $('#scrollbar').height() - $('#scrollbar').children('div').height()
l($('#body_wrapper').scrollTop()/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height())))
$('#body_wrapper').scrollTop(scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height())))
$('#scrollbar').children('div').offset({top:scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))})
}
});


You may see the live example here: http://thebcelements.com/portfolio/temp2/.
If you shrink the browser down it will also disappear off the page completely. I can't think why this keeps happening. I am completely pulling my hair out over this.

(the l() function is just for logging)

Thanks.

[molendijk]

Your 'scrolldown-amount' increases while the user scrolls down using the mousewheel. Have you tried to put var scrollFix outside the binding function first?

[Deadweight]

I changed it actually and now it works. The reason is the calculation, I needed to do:


scrollFix*(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))

and not:


scrollFix/(parseInt($('#body_wrapper').height()) / parseInt($('#backgrounders').height()))


Thanks