jQuery disable scroll when mouse over an absolute div

Question

This has been a popular question so I am updating to give an overview of the answers provided here and which may be best for you. There are three unique solutions included. Two are from Amos and one is from myself. However, each operates differently.

1. Amos - Set overflow:hidden on body. This is simple and works great. But the main window's scrollbars will flash in and out.
2. Amos - Use javascript to disable mouse wheel. This is great if you don't need mousewheel at all.
3. This answer - Use javascript to scroll only the element you are over. This is the best answer if your inner div needs to scroll, but you don't want any other divs to scroll. The example fiddle showcases this.

http://jsfiddle.net/eXQf3/371/

The code works as follows:

• Catch scroll event on the current element
• Cancel the scroll event
• Manually scroll the current element only

 

$('#abs').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});​

Changelog:

• FF support
• scrollTo null check to revert to default behavior in case something unforeseen happens
• support for jQuery 1.7.

You cannot disable window scroll, there is a simple workaround though:

//set the overflow to hidden to make scrollbars disappear
$('#container').hover(function() {
    $("body").css("overflow","hidden");
}, function() {
     $("body").css("overflow","auto");
});

See demo: http://jsfiddle.net/9Htjw/

---

UPDATE

You can disable the mouse wheel though.

$('#container').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
        stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}

Source: http://solidlystated.com/scripting/javascript-disable-mouse-wheel/

Demo: http://jsfiddle.net/9Htjw/4/

mrtsherman: if you bind the event like this, amosrivera's code works also for firefox:

    var elem = document.getElementById ("container");
    if (elem.addEventListener) {    
        elem.addEventListener ("mousewheel", stopWheel, false);
        elem.addEventListener ("DOMMouseScroll", stopWheel, false);
    }
    else {
        if (elem.attachEvent) { 
            elem.attachEvent ("onmousewheel", stopWheel);
        }
    }

I used nicescroll on my page no method worked. I realized the nicescroller is calling the scroll event and had to temporarily disable nicescroll when hovering the element.

Solution: Temporarily disable nicescroll when hovering an element

$('body').on('mouseover', '#element', function() {
    $('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
    $('body, html').css('overflow', 'hidden').niceScroll();
});