要素スクロールの動作を無効にし、代わりにページをスクロールする指示

Question

私がやっていることは、要素（たとえば選択ドロップダウン）に配置すると、その要素のマウスホイールのスクロールを無効にし、代わりにページをスクロールする指示を作成することです。私はこれに2つのアプローチを見つけることができましたが、いずれも完了していません。

フォーカスが要素上にある間にこれが

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

要素がマウスホイールイベントを受け取ったとき、または何らかの形でページスクロール動作にリンクするときのスクロール動作を再定義する必要がありますか？

Answer 1

私はこの問題の一部の回避策を見つけました。私のユースケースで要素内をスクロールするのは、その要素がフォーカスされているときだけです。要素からフォーカスを削除すると、マウスイベントが上方向に伝播します。次のコードでは満足のいく結果が得られました。

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

このソリューションの欠点は、スクロール時にドロップダウンが発生することです。