Question

我正在尝试使用JavaScript阻止Chrome中的默认 Ctrl + MouseWheel 缩放行为，对于我使用的其他浏览器preventDefault()和{{1在鼠标滚轮事件的回调函数中工作完美，因为其他浏览器总是触发鼠标滚轮事件，但Chrome不会。

阅读问题How to catch Zoom event with GWT and Chrome 我发现 Ctrl + MouseWheel 可以作为调整大小事件捕获，但在缩放页面后，我无法阻止此行为。

Chrome中的 Ctrl + MouseWheel 之前是否还有其他事件？或者是错误？

Answer 1

不幸的是，在Chrome中拦截或阻止 CTRL +滚轮（缩放）事件是不可能的。

https://code.google.com/p/chromium/issues/detail?id=111059正在跟踪此问题。明确问题以获得（进度）更新的通知。

Answer 2

'wheel'事件和preventDefault现在正在运行。 MDN

Answer 3

从Chrome 76开始，可以取消wheel上的window事件，但仅当您注册了被动事件侦听器时。从其他答案和示例来看，如果事件位于根元素<div>之类的DOM元素上，您似乎也可以取消该事件。

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 4

试图防止缩放窗口/文档/正文并不能真正起作用，但是用div包裹正文内容并防止缩放效果很好。

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

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

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

Answer 5

作为@ Vl4dimyr答案的改进

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>

Answer 6

在 Chromium bug tracker 论坛上发现了这个 fiddle，现在看来问题已经解决了。 Chromium 现在先将 ctrl+wheel 事件发送到 webkit，然后再使用它们进行缩放。而不是在 EventHandler::handleWheel
中阻止滚动这些事件 event.preventDefault() 应该可以解决问题。

Chrome - Javascript阻止默认Ctrl + MouseWheel行为

6 个答案: