Chrome - Javascript prevent default Ctrl + MouseWheel behavior

Question

I'm trying to prevent the default Ctrl+MouseWheel zoom behavior in Chrome with JavaScript, for the other browsers I use preventDefault() and stopPropagation() in the callback function for mouse-wheel event and works perfect because the other browser always trigger a mouse-wheel event but Chrome does not.

Reading the question How to catch Zoom event with GWT and Chrome I found that Ctrl + MouseWheel can be caught as a resize event but after zooming the page so I can't prevent the behavior with this one.

Is there other event created before Ctrl+MouseWheel in Chrome or is a bug?

Answer 1

Trying to prevent zoom on window/document/body does not really work but wrapping the contents of the body with a div and preventing zoom on this works fine.

document.getElementById('root').addEventListener('wheel', event => {
  if (event.ctrlKey) {
    event.preventDefault()
  }
}, true)

#root {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: silver;
}

<div id="root">no zoom allowed</div>

Answer 2

As of Chrome 76, the wheel event on window can be cancelled, but only if you register a passive event listener. From other answers and examples it seems like you can also cancel the event if it's on a DOM element such as a root <div>.

window.addEventListener('wheel', function(event) {
  event.preventDefault();
}, { passive: false });

body {
  font-family: sans-serif;
  font-size: 24px;
  background: #AAA;
}

<p>
  Inside of this page, you cannot zoom with the mouse wheel.
</p>

Answer 3

'wheel' event and preventDefault are working now. MDN.