当鼠标悬停在绝对div上时，jQuery禁用滚动

当鼠标悬停在div上时，我试图禁用窗口鼠标滚动功能，以便只启用div滚动，当鼠标离开div时，再次应用到窗口的滚动。div的位置绝对正确

我看过这篇文章，但它似乎没有提供任何答案-因此我的问题

我假设是这样的（如果只有这些方法存在的话）：

---

您不能禁用窗口滚动，但有一个简单的解决方法：

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

请参见演示：

---

更新

不过，您可以禁用鼠标滚轮

$('#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 */
}

来源：

---

演示：

这是一个很受欢迎的问题，因此我现在更新一下，概述一下这里提供的答案，哪些答案可能最适合您。包括三种独特的解决方案。两个来自阿莫斯，一个来自我自己。然而，每一种操作方式都不同

Amos-设置

溢出：隐藏在正文上。这很简单，效果很好。但是主窗口的滚动条会在屏幕上来回闪烁

Amos-使用javascript禁用鼠标滚轮。如果你根本不需要鼠标滚轮，这就太好了

这个答案-使用javascript只滚动您所浏览的元素。如果您的内部div需要滚动，但不希望任何其他div滚动，这是最好的答案。小提琴的例子说明了这一点

该守则的运作如下：

• 捕获当前元素上的滚动事件
• 取消滚动事件
• 仅手动滚动当前元素

更改日志：

• FF支持
• scrollTo null check可在发生意外情况时还原为默认行为
• 对jQuery1.7的支持

---

mrtsherman：如果您像这样绑定事件，amosrivera的代码也适用于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);
        }
    }

---

我在这里试图用我的代码做的是：

• 检查div是否悬停在上方或鼠标悬停在上方

• 获取滚动方向

• 将ScrollTop与容器的高度进行比较，并在达到最大值或最小值时防止进一步滚动（直到鼠标悬停）

  var hover_over=false；
  变量悬停控制；
  onCrtlMouseEnter（crtl）{//函数具有用于多控件的相同功能
  悬停的_over=true；//可以替换为$（control）.onMouseCenter（）等
  悬停的_control=crtl；//您可以命名它
  }
  功能onCrtlMouseLeave（crtl）{
  悬停在上方=错误；
  悬停的_控件=null；
  }
  $（文档）.on（“鼠标滚轮”，函数（e）
  {
  如果（悬停在上方==true）{
  var-control=$（悬停的_-control）；//获取控件
  var direction=e.originalEvent.wheelDeltaY；//获取滚动方向
  如果（方向<0）{
  if（（control.scrollHeight-control.clientHeight）==control.scrollTop）{
  返回false；//达到最大向下滚动…防止；
  }
  }
  否则，如果（方向>0）{
  如果（control.scrollTop==0）{
  返回false；//已达到最大值向上滚动…防止；
  }
  }
  }
  });
  

可能不是最干净的代码，可以很容易地改进，但这对我来说很有用。

---

（control.scrollHeight-control.clientHeight）

这部分对我来说有点可疑，但你应该知道如何解决这个问题。

我在页面上使用了nicesroll，但没有任何方法有效。我意识到nicescroller正在调用scroll事件，在悬停元素时必须临时禁用nicescroll

解决方案：悬停元素时暂时禁用滚动

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

---

@谢尔曼先生的回答几乎对我起了作用，但有一个问题

---

我很难理解你的问题，这不是默认行为吗？当你将鼠标悬停在一个“div”上，而你有“overflow:scroll”按钮时，它只会滚动“div”，换言之，它会滚动窗口，或者你是在试图使它这样做，例如，当它完成滚动时，它仍然不会滚动窗口？我怀疑他正是在追求你所描述的。他绝对定位的div会滚动，但当它完成滚动时，他不希望主窗口滚动。在编辑wordpress帖子时，这一直困扰着我。一切都从屏幕上飞走了。在编辑器中工作时，如果您的工作保持不变，那就太好了！是的-这正是我的意思-谢谢@mrtsherman澄清这一点。@kunigami-我找出了错误并更新了我的答案

e.wheelDelta

在jQuery1.7中被删除，因此我必须通过

orginalEvent

来访问它。这里有一个类似的解决方案，使用纯JS事件而不是jQuery事件：@mrtsherman首先，谢谢你的回答。但是不要从JSFIDLE复制paster。上述代码将导致webkit中出现意外的非法令牌，该令牌包含一些无效（不幸的是不可见）字符。请参阅。谢谢！在Chrome、Safari、Firefox和IE9中，这对我来说很有魅力。谢谢。在Chrome、Firefox、IE9/8/7中运行良好。在webkit中获取了非法的意外标记，并通过在Notepadd++中粘贴代码段修复了它，删除了隐藏的“？”字符，并将代码复制粘贴到Visual Studio中。它工作正常，并且在div背景透明时出现问题。请告诉我如何修复该问题。

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

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

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

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