Since the DOM doesn't offer any way of differentiating between the first scrolling event fired and subsequent ones that happen to be part of the same scrolling motion, we're forced to think about indirect methods of distinguishing between them.
If you rapidly scroll through any particular element, a scrolling event is fired many times in sequence. Using the following code, we can get an idea about exactly how often that happens:
$('#exampleDiv').bind('mousewheel', function () {
console.log(new Date().getTime());
});
When you scroll over that div, you'll get a console output that looks like this:
// Using mouse wheelbar
251327626600149
251327626600215
251327626600265
251327626600282
251327626600332
251327626600365
// Using touchpad
251327626626207
251327626626225
251327626626261
251327626626276
251327626626312
251327626626345
Looking at this output, it seems like the mousescroll events are generally fired within somewhere between 20 ms and 60 ms of each other. To be safe, we'll take the upper end to be 100 ms. This is very informative, because we can use it to distinguish between scrolling events that are part of the same action and ones that are likely distinct and deliberately initiated by the user.
What you could do from here is to make a globally accessible 'timestamp' variable, updating it every time a mousescroll event is fired, whether successful or not. Something like this:
var timeStamp = new Date().getTime();
$('#exampleDiv').bind('mousewheel', function (event) {
var timeNow = new Date().getTime();
// Need to prevent the default scrolling behavior
event.preventDefault();
// If the last mousescroll happened less that 100 ms ago, update
// timeStamp and do nothing
if (timeNow - timeStamp < 100) {
timeStamp = timeNow;
return;
} else {
timeStamp = timeNow;
scrollToSomeOtherDiv();
}
});
This effectively ignores all mousescroll events that are fired after the initial event that preceded them all but starts working again after the user has paused for 100 ms.
This would solve your problem, except if your scrollToSomeOtherDiv() function involved some kind of time-consuming animation. You could of course make a global boolean isAnimating, and check to see if it's true every time a mousescroll event is fired (making sure to turn it false in a callback once the animation is over).
That would work, except that it could provide a jarring experience for the user. Someone who wants to scroll through two panels quickly will likely not pause between scrolls even after seeing the animation begin. The code above will see all their mousescroll events as part of the same scrolling motion and continue to ignore them!
In that case, you could simply use the animation time as your threshold. You set a timeStamp once the animation is begun and then ignore all mousescroll events during that period of time. I've written up an example here: http://jsfiddle.net/Sg8JQ/
The relevant code is here:
var lastAnimation = 0;
var animationTime = 1000; // in ms
var quietPeriod = 500; // in ms, time after animation to ignore mousescroll
function scrollThis(event, delta, deltaX, deltaY) {
var timeNow = new Date().getTime();
// change this to deltaX/deltaY depending on which
// scrolling dir you want to capture
deltaOfInterest = deltaY;
if (deltaOfInterest == 0) {
// Uncomment if you want to use deltaX
// event.preventDefault();
return;
}
// Cancel scroll if currently animating or within quiet period
if(timeNow - lastAnimation < quietPeriod + animationTime) {
event.preventDefault();
return;
}
if (deltaOfInterest < 0) {
if ($('.active').next('div').length) {
lastAnimation = timeNow;
$('.active').removeClass('active').next('div').addClass('active');
$('html,body').animate( {
scrollTop: $('.active').offset().top }, animationTime);
}
} else {
if ($('.active').prev('div').length) {
lastAnimation = timeNow;
$('.active').removeClass('active').prev('div').addClass('active');
$('html,body').animate( {
scrollTop: $('.active').offset().top }, animationTime);
}
}
}
// Note: mousewheel() is defined in the mousewheel plugin by Brandon Aaron
// You could do without it, but you'd need to adjust for firefox and webkit
// separately.
//
// You couldn't use $(document).scroll() because it doesn't allow you to
// preventDefault(), which I use here.
$(document).mousewheel(scrollThis);
I've also included quietPeriod which is time beyond the animation time during which you want to continue to ignore mousescroll events. You can set it to 0 if you want the scroll to be 'responsive' as soon as the animation is complete.
