Question

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?

Answer 1

You can use galambalazs’s solution as Guilherme Torres Castro answered. But it doesnt cancel scroll event. If you want cancel scroll event, you must add it.
My fiddle solution inspirate by ntownsend’s post.

Problem of this solution is “blicking”(hiding/showing) scrollbar. So I add scroll to actual scroll position on window.onScroll event and my FINAL SOLUTION is here

Final solution has problem when I try scrolling, but event beforeScroll doesnt exist https://stackoverflow.com/a/3352244/1102223