关于javascript：在div上禁用mousewheel插件


disable mousewheel plugin over div

我正在使用此处显示的mousewheel插件：

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

它非常适合使页面水平滚动，但是我想暂时禁用它，并在弹出几个特定的??div时恢复为垂直滚动。我尝试了这个：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;
    });
    }
   });

 });

您已经绑定了mousewheel事件。 return false对先前绑定的事件不执行任何操作。要执行您想做的事情，您需要取消绑定原始事件，然后在mouseleave上重新绑定或停止传播。我不确定是否可以取消绑定/销毁mousewheel事件，也不确定e.stopPropagation()是否也可以。

也许更简单的解决方案是当有人将鼠标悬停在该div上时设置一个标志，并在设置了该标志的情况下防止水平滚动。例如，类似这样的方法可能会起作用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
});

相关讨论