如何防止 Javascript 中鼠标滚轮事件的整页缩放？

Question

我希望能够使用触控板和 wheel 事件来更新 DOM 元素的比例。它按预期工作，但在多个浏览器上它也执行整页缩放。

我想保持比例更新，但我想防止整页缩放。

我读到在 wheel 事件中添加 e.preventDefault 可以防止这种情况发生。我有它，但它似乎不起作用。

这是我的代码笔：https://codepen.io/ChucKN0risK/full/JqwrVe

Answer 1

e.preventDefault();  e.stopPropagation();

尝试使用这两个

Answer 2

在文档级别绑定的事件（window.document、window.document.body 或 window）被视为被动事件，无法阻止。您应该使用 { passive: false } 作为 addEventListener 函数的第三个参数指定该事件不是被动的。有关详细信息，请参阅 this link。

你的情况：

document.addEventListener('wheel', function(e) {
    e.preventDefault();
    e.stopPropagation();

    if (e.ctrlKey) {
        var s = Math.exp(-e.deltaY / 100);
        scale *= s;
    } else {
        var direction = 1; //natural.checked ? -1 : 1;
        tx += e.deltaX * direction;
        ty += e.deltaY * direction;
    }
    var transform = 'translate(' + tx + 'px, ' + ty + 'px) scale(' + scale + ')';
    box.style.webkitTransform = transform;
    box.style.transform = transform;
}, {
    passive: false // Add this
});

此外，由于使用了 iframe，它无法在 codepen 上运行，因为事件绑定在 iframe 上，而不是在 codepen 页面本身上。

如何防止 Javascript 中鼠标滚轮事件的整页缩放？

How can I prevent full page zoom on mousewheel event in Javascript?

javascript

trackpad

mousewheel

zooming