Директива для отключения поведения прокрутки элемента и страницы прокрутки вместо

Question

То, что я пытаюсь сделать, это создать директиву, которая при размещении на элементе (например, выпадающем списке выбора) отключает прокрутку колеса мыши для этого элемента и вместо этого прокручивает страницу , Мне удалось найти два подхода к этому, но ни один из них не является полным.

Это не позволяет прокручивать страницы, когда фокус находится на элементе (отключает все прокрутки)

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

И это работает для Firefox и хром, но ничего не делает для 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(); 
      }); 
     } 
    } 
}); 

Недостатком этого решения является раскрывающееся меню при прокрутке.