Chrome - Javascript prevent default Ctrl + MouseWheel behavior
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>
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>
'wheel' event and preventDefault are working now. MDN.