user398341 user398341 - 4 months ago 210
jQuery Question

jQuery disable scroll when mouse over an absolute div

I'm trying to disable the window mouse scroll functionality when the mouse is hovering over the div - so that only div scrolling is enabled - and when mouse moves away from the div - scrolling to the window is applied again. The div is positioned absolutely.

I've seen this post use jquery to disable mouse scroll wheel function when the mouse cursor is inside a div? but it doesn't seem to provide any answer - hence my question.

I'm assuming it would be something like this (if only these methods existed):

$('#container').hover(function() {
$(window).scroll().disable();
$(this).scroll().enable();
}, function() {
$(window).scroll().enable();
});

Answer

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.
Comments