jQuery disable scroll when mouse over an absolute div

Question

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 1

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.

Answer 2

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/

Answer 3

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);
        }
    }

Answer 4

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();
});

Answer 5

What I'm trying to do here with my code is:

• Check if div is hovered over or moused over

• Get the scroll direction

• Compare the ScrollTop with the Height of the container and prevent further scroll when max or min is reached(until moused is out).

  var hovered_over = false;
  var hovered_control;          
  function onCrtlMouseEnter(crtl) {      //Had same thing used for mutliple controls 
      hovered_over = true;       //could be replaced with $(control).onmouseenter(); etc
      hovered_control = crtl;    //you name it
  }
  function onCrtlMouseLeave(crtl) {
      hovered_over = false;
      hovered_control = null;
  }
  
  $(document).on("mousewheel",function(e)
  {
     if (hovered_over == true) {                            
          var control = $(hovered_control);                 //get control
          var direction = e.originalEvent.wheelDeltaY;      //get direction of scroll
          if (direction < 0) {
              if ((control.scrollHeight - control.clientHeight) == control.scrollTop) {
                  return false;              //reached max downwards scroll... prevent;
              }
          }
          else if (direction > 0) {
              if (control.scrollTop == 0) {
                  return false;              //reached max upwards scroll... prevent;
              }
          }
      }
  });
  

http://jsfiddle.net/Miotonir/4uw0vra5/1/

Probably not the cleanest code and it can be improved upon easily, but this works for me. (control.scrollHeight - control.clientHeight) this part is kindoff questionable for me , but you should get the idea how to approach the problem anyways.

Answer 6

@mrtsherman's Answer almost worked for me, but there was a breaking change with passive scrolling in Chrome.

preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});

function preventScrolling(event) {
  var scrollTo = null;

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

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