在 div 上禁用鼠标滚轮插件

Question

我正在使用此处显示的鼠标滚轮插件：

https://github.com/jquery/jquery-mousewheel

它可以很好地让页面水平滚动，但我想暂时禁用它并在弹出几个特定的 div 时恢复为垂直滚动。我试过这个：

jQuery(document).ready(function() {

    jQuery('html, div.everthing').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 1);
      e.preventDefault();
    });

    jQuery(".interests.content .child").mouseover(
      function stopHorizScroll(){
      var vScroll = [
        jQuery(".child.books").attr("class"),
        jQuery(".child.quotes").attr("class"),
        jQuery(".child.humans").attr("class"),
        jQuery(".child.travel").attr("class")
        ];

      var x = "show"

    if (vScroll[0].indexOf(x) !== -1) {
      jQuery('html, div.everthing').mousewheel(function(e, delta) {
      return false; 
    }); 
    }
   });

 });

Answer 1

您已经绑定了鼠标滚轮事件。 return false 对您之前绑定的事件没有任何作用。要执行您想要执行的操作，您需要取消绑定原始事件，然后在 mouseleave 上重新绑定，或停止传播。我不确定你是否可以 unbind/destroy 鼠标滚轮事件，我也不确定 e.stopPropagation() 是否也可以。

也许更简单的解决方案是在有人将鼠标悬停在 div 上时设置一个标志，并在设置标志后阻止水平滚动。例如，这样的事情可能有效：

var stopScroll = false;

jQuery('html, div.everthing').mousewheel(function(e, delta) {
  if ( stopScroll ) return;

  this.scrollLeft -= (delta * 1);
  e.preventDefault();
});

jQuery(".interests.content .child").hover(function() {
  stopScroll = true;
}, function() {
  stopScroll = false;
});

在 div 上禁用鼠标滚轮插件

disable mousewheel plugin over div

javascript

jquery

scroll

mousewheel