javascript - 车轮事件javascript给出不一致的值

Question

我正在使用 html / javascript / css 进行缩放功能我将一个事件侦听器
附加到我的标签上， 它可以很好地与鼠标配合使用。放大时给出 120的正倍数，否则为负数 问题在于触摸板 在放大手势时，它没有给出一致的值。有一些介于两者之间。因此，变焦非常粗糙。如何实现平滑缩放或如何使用触摸板获得一致的值wheeldivconsole.log(event.wheelDelta)
console.log



-120
wheelDelta

Answer 1

event.wheelDelta并非在每个浏览器中都定义，根据其 Mozilla 文档已弃用且不应再使用。您可以使用值event.deltaX和event.deltaY。有关详细信息，请参阅Mozilla 滚轮文档。

我在 Google Chrome 和 Mozilla Firefox 中测试了以下代码。价值观非常不同。谷歌浏览器总是返回event.deltaY值100or -100。在 Mozilla Firefox 中，它总是返回值3或-3.

document.addEventListener('wheel', function(event) {
    console.log(event.deltaX, event.deltaY);
});

我不会依赖轮值，而是听像Mozilla 滚动文档中描述的滚动事件：

var lastKnownScrollPosition = 0;
var ticking = false;

function doSomething(scrollPosition) {
    console.log(scrollPosition);
}

window.addEventListener('scroll', function(e) {
    lastKnownScrollPosition = window.scrollY;
    if(!ticking) {
        window.requestAnimationFrame(function() {
            doSomething(lastKnownScrollPosition);
            ticking = false;
        });
    }
    ticking = true;
});

Answer 2

使用event.wheelDeltaYorevent.deltaY
console.log(event.wheelDeltaY)用于鼠标： 对于触摸板： 而不是 -120 它给出 0。出现在 wheelDelta 中的 -120 实际上是水平滚动（）的结果。（当您尝试使用触摸板放大时，可能会有轻微的水平运动太） 当它为0时不要缩放，你会得到一致的平滑缩放！



wheelDeltaX

Answer 3

变比例 = 1;

document.addEventListener("wheel",function(e){

  if(e.wheelDelta>0) 比例+=0.01;
  否则比例-=0.01；

  // 使用 Scale 变量 ....

  e.preventDefault();
});