EDIT:
Perhaps I am approaching this wrong - does anyone know any way of stopping the page from scrolling with the mouse wheel? Can this even be disabled?
--
I have a div container filled with smaller div's which animate when the mouse wheel is scrolled. This is not a div with overflow:hidden, and it has no scrolling areas - it is just a simple jquery animation (the animation works fine btw).
Unfortunately despite all my best efforts I cannot stop the entire page from scrolling whilst the mouse is inside the container div.
I am using Brandon Aaron's mousewheel plugin for jQuery (which is supposed to solve my problem, but unfortunately it isnt).
Here is my javascript:
$('#containerDiv').mousewheel(function(event,delta,deltaX,deltaY){
/* all of this is supposed to stop the page from scrolling... but it doesnt*/
event.bubbles=false;
event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
if(event.stopPropagation) event.stopPropagation();
if(event.stopImmediatePropagation) event.stopImmediatePropagation();
$(document).blur();
$(this).focus();
/*this function just animates the divs inside the container divs*/
animateDivs(delta);
});
Ive been through these questions already:
Prevent scrolling of parent element?
stop mousewheel's continued effect
stop scrolling of webpage with jquery
and none of them seem to help.
Can anyone offer a better solution to this problem?