Я не могу предотвратить событие колесика мыши в Chrome

Question

Я хочу, чтобы пользователь не мог прокрутить колесо мыши. В Firefox это работает, но не в Chrome. Что нужно изменить для Chrome?

$(window).on('wheel', function(e) {    
  e.preventDefault(); // Prevent user scroll during page jump
})

jsFiddle

Answer 1

Вам нужно установить обработчик событий как пассивный, чтобы он работал в Chrome. Насколько я знаю, это невозможно в jQuery. Но вы можете использовать обычный addEventListener для этого.

document.addEventListener('wheel', function(e) {
  e.preventDefault(); // Prevent user scroll during page jump
}, {
  passive: false
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 2000px;
}

<div id="banner-message">
  <p>Mousewheel should be prevented</p>
</div>

Как отметил Шиккедиль в комментариях: если вы хотите поддерживать более старые (версии) браузеров (например, Internet Explorer), рекомендуется сначала проверить, поддерживается ли параметр passive браузером. В старых браузерах логический тип был третьим параметром addEventListener. Поэтому они могут выдать ошибку или установить для третьего параметра значение true (по умолчанию - false), что может вызвать нежелательное поведение. Вы можете использовать код ниже для этого.

var passiveSupported = supportsPassive();

document.addEventListener('wheel', function(e) {
  e.preventDefault(); // Prevent user scroll during page jump
}, passiveSupported ? {
  passive: false
} : false);

function supportsPassive() {
  var passiveSupported = false;

  try {
    var options = {
      get passive() {
        passiveSupported = true;
      }
    };

    window.addEventListener("test", options, options);
    window.removeEventListener("test", options, options);
  } catch (err) {
    passiveSupported = false;
  }

  return passiveSupported;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 2000px;
}

<div id="banner-message">
  <p>Mousewheel should be prevented</p>
</div>