指令禁用元素滚动行为和滚动页面

Question

我想要做的是创建一个指令，当放置在一个元素（例如选择下拉）禁用该元素的鼠标滚轮滚动，而是滚动页面。我设法找到了两种方法，但都不完整。

这不允许页面的滚动而重点是在元素上（它禁用所有滚动）

over.directive('disableSelectScroll', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      element.on('mousewheel', function (e) { 
       return false; 
      }) 
     } 
    } 
}); 

这适用于Firefox和Chrome，但并没有为IE（11）

over.directive('disableSelectScroll', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      ['touchstart', 'touchmove', 'touchend', 'keydown', 'wheel', 'mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'].forEach(function (eventName) { 
       element.unbind(eventName); 
      }); 
     } 
    } 
}); 

当元素收到mousewheel事件或以某种方式链接到页面滚动行为时，是否必须重新定义滚动行为？

Answer 1

我发现这个问题的部分解决方法。在我的用例中的一个元素内滚动只在该元素被聚焦时发生。从元素中移除焦点，鼠标滚轮事件向上传播。以下代码提供了令人满意的结果：

over.directive('disableSelectScroll', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attributes) { 
      element.on('mousewheel', function() { 
       element.blur(); 
      }); 
     } 
    } 
}); 

此解决方案的缺点是滚动时关闭下拉菜单。