指令禁用元素滾動行爲和滾動頁面

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

此解決方案的缺點是滾動時關閉下拉菜單。