jQuery désactive le défilement lorsque la souris passe sur une div absolue

Question

J'essaie de désactiver la fonction de défilement de la souris de la fenêtre lorsque la souris survole le div - de sorte que seul le défilement du div soit activé - et lorsque la souris s'éloigne du div - le défilement de la fenêtre est à nouveau appliqué. Le div est positionné de manière absolue.

J'ai vu ce message utiliser jquery pour désactiver la fonction de la roulette de la souris lorsque le curseur de la souris se trouve à l'intérieur d'une div ? mais il ne semble pas apporter de réponse - d'où ma question.

Je suppose qu'il s'agirait de quelque chose comme ceci (si seulement ces méthodes existaient) :

$('#container').hover(function() {
     $(window).scroll().disable();
     $(this).scroll().enable();
}, function() {
     $(window).scroll().enable();
});

Answer 1

La réponse de @mrtsherman a presque fonctionné pour moi, mais il y avait une changement radical avec le défilement passif dans Chrome.

preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});

function preventScrolling(event) {
  var scrollTo = null;

  if (event.type == 'mousewheel') {
    scrollTo = (event.wheelDelta * -1);
  } else if (event.type == 'DOMMouseScroll') {
    scrollTo = 40 * event.detail;
  }

  if (scrollTo) {
    event.preventDefault();
    $(this).scrollTop(scrollTo + $(this).scrollTop());
  }
}