7

我正在尝试使用 JavaScript 阻止 Chrome 中的默认Ctrl+MouseWheel缩放行为，对于我使用的其他浏览器preventDefault()以及stopPropagation()鼠标滚轮事件的回调函数，并且效果很好，因为其他浏览器总是触发鼠标滚轮事件，但 Chrome 不会.

阅读问题如何使用 GWT 和 Chrome 捕获缩放事件 我发现Ctrl+MouseWheel可以作为调整大小事件被捕获，但是在缩放页面之后，我无法阻止这个行为。

Ctrl在 Chrome 中+之前是否创建了其他事件MouseWheel或者是错误？

4

6 回答 6

5

试图阻止窗口/文档/正文的缩放并没有真正起作用，但是用 div 包装正文的内容并防止缩放它可以正常工作。

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>

于 2019-06-11T14:53:36.457 回答
3

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

于 2016-07-08T10:39:19.653 回答
3

从 Chrome 76 开始，可以取消wheel事件 on ，但前提是您注册了被动事件侦听器。从其他答案和示例看来，如果事件位于诸如 root 之类的 DOM 元素上，您似乎也可以取消该事件。window<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>

于 2019-08-20T22:29:56.453 回答
1

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

正在https://code.google.com/p/chromium/issues/detail?id=111059跟踪此问题。为问题加注星标以获取（进度）更新通知。

于 2013-07-25T17:36:35.623 回答
0

作为@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>
于 2020-04-17T12:27:27.573 回答
0

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

于 2021-05-24T14:00:06.113 回答