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

回答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.

Amos - Set overflow:hidden on body. This is simple and works great. But the main window's scrollbars will flash in and out.
Amos - Use javascript to disable mouse wheel. This is great if you don't need mousewheel at all.
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.

回答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/

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

回答4:

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.

回答5:

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

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

来源：https://stackoverflow.com/questions/7571370/jquery-disable-scroll-when-mouse-over-an-absolute-div

标签

jquery

scroll

mouseover