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?

Putnem

Answer 1

Unfortunately, it's impossible to intercept or block the CTRL + scrollwheel (zoom) event in Chrome.

This issue is being tracked at https://code.google.com/p/chromium/issues/detail?id=111059. Star the issue to get notified of (progress) updates.

Wolver

Answer 2

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>

Kossuth

Thumbs up! Works for me, Chrome 73.0.3683.86, Linux. – Serviette

fyi, in brave/chrome if you happen to be using document.writeln() inside the callback, it does something, probably changes the focus, dunno, but the first such event gets trapped and the rest bypass the target, so it seems to be broken, but it's not. just spent 10 minutes figuring that out – Jeri

Note that onWheel preventDefault is broken in React. Handling the wheel event with a ref and addEventListener or onwheel works fine, but the property onWheel directly on the div does not work. github.com/facebook/react/pull/19654 – Nomism

Answer 3

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>

Cerebral

I'm confused by this answer. It works only if you register a passive event listener -- but your example registers an event explicitly with passive: false, and the documentation says having a passive event listener disables preventDefault(). – Touchwood

Answer 4

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

Banka

Answer 5

Found this fiddle on chromium bug tracker forum, seems now the issue has been fixed. Chromium now sends ctrl+wheel events to webkit first before using them for zooming. Rather than prevent scrolling for these events in EventHandler::handleWheel
event.preventDefault() should do the trick.

Vittle

Answer 6

For React JS

In my project, I added a ref for my component and then added event listener to the ref and set passive to false to disable the default Zoom in and out.

useEffect(() => {
const element = boxRef.current;
if (element) {
  element.addEventListener("wheel", handleWheel, {
    capture: true,
    passive: false,
  });
}

return () => {
  if (element) {
    element.removeEventListener("wheel", handleWheel);
  }
};
}, []);

My html is as follows:

<Box
    ref={boxRef}
    sx={{
      position: "relative",
      height: "100%",
      transform: `scale(${zoomValue / 100})`,
    }}
  ></Box>

My handleWheel funcion is:

const handleWheel = (event) => {
if (event.ctrlKey) {
  event.preventDefault();
  //control key is pressed
  if (event.deltaY > 0) {
    //scrolled down
    console.log("Scroll Down");
  } else {
    //scrolled up
    console.log("Scrolled Up");
  }
}
};

This works fine for me and I'm able to add my custom Zoom in and Zoom out.

Indivertible

Answer 7

as a improving of @Vl4dimyr 's answer

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

---

#root {
  position: absolute;
  top: 0;
  right: 0;
  /*-------------------important part----------------------*/
  /*bottom: 0;*/
  min-height:100vh; /*extendible cover for document*/
  /*-------------------------------------------------------*/
  left: 0;
  background: silver;
}

---

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

Latton