提问人：frans 提问时间：7/23/2023 更新时间：7/29/2023 访问量：65
在 Javascript 中，使用鼠标垫时如何在基于 Firefox 和 Chromium 的浏览器上实现类似的放大/缩小行为？
In Javascript how to achive similar zoom-in/-out behavior on Firefox and Chromium based browsers when using a mouse pad?
问：
我最近发现，虽然我通常在浏览器（Firefox）中放大/缩小的方式，按下并使用鼠标滚轮“向上/向下滚动”在Firefox和基于Chromium的浏览器上都很好用，但它在鼠标垫上却不一样。CTRL
即使在相同的系统上，Chromium（基于浏览器）也不会将触摸板发送的滚动事件用于缩放，而用于滚动。
想要在我个人（基于纯 JavaScript）的 Web 项目中在两个浏览器上实现相同的行为（我知道，这通常不是一个好主意），我很快发现自己在修补 s 并基本上重新实现了缩放行为 - 但一开始就不知道到底发生了什么。eventListener
这种行为差异是有原因的吗？在现代 Linux 发行版甚至 Windows 中似乎都是相似的。
在放大时，是否有通用的方法或指南来处理 JavaScript 中的控制事件/手势（例如在画廊/绘图应用程序/地图/..）中？也许我应该知道一些术语来告知自己？
答：
0赞
frans
7/29/2023
#1
我不确定我是否会将此标记为答案，因为它不是我最初想要的。
我目前所做的也接近你在其他地方所能找到的
// set an initial zoom level
var zoom = 1.0;
// only handle Chromium - you might want to consider handling
// other browsers equally instead
if (!!window.chrome) {
window.addEventListener("wheel", (event) => {
const sign = Math.sign(event.deltaY);
// only act if CTRL key is pressed and we're actually zooming
if (!event.ctrlKey || sign == 0) {
return;
}
// make sure we don't accidentally scroll up/down
event.preventDefault();
// calculate and apply new zoom level
zoom = Math.max(1.0, zoom * (sign > 0 ? 0.9 : 1.1));
document.body.style.transformOrigin = "0 0";
document.body.style.transform = `scale(${zoom})`;
}, {passive: false}); // needed to be able to preventDefault()
}
参见 Zoom Vs. CSS3 中的缩放与缩放，了解zoomscale
评论