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

Question

我正在使用 html / javascript / css
开发缩放功能我将 wheel 事件侦听器附加到我的 div 标签和 console.log(event.wheelDelta)
它与鼠标配合得很好。 console.log 为放大提供 120 的正倍数，否则为负

触摸板有问题

在放大手势时，它不会给出一致的值。中间有一些 -120。因此变焦非常粗糙。
如何实现平滑缩放或如何使用触摸板获得一致的 wheelDelta 值

Answer 1

event.wheelDelta 并未在每个浏览器中定义，根据 its Mozilla documention. You could use the values event.deltaX and event.deltaY. For further information, please refer to Mozilla wheel documentation.

已弃用且不应再使用

我在 Google Chrome 和 Mozilla Firefox 中测试了以下代码。价值观非常不同。 Google Chrome 始终 returns 作为 event.deltaY 值 100 或 -100。在 Mozilla Firefox 中它总是 returns 值 3 或 -3.

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

我不会依赖于滚轮值，而是像 Mozilla scroll documentation:

中描述的那样听滚动事件

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.wheelDeltaY或event.deltaY
console.log(event.wheelDeltaY) 鼠标：

对于触摸板：

而不是-120，它给出 0。出现在 wheelDelta 中的 -120 实际上是水平滚动的结果（wheelDeltaX）。（当您尝试使用触摸板放大时，也可能有轻微的水平运动）
当它为 0 时不要缩放，您将获得一致的平滑缩放！

Answer 3

var Scale = 1;

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

  if(e.wheelDelta>0) Scale+=0.01; 
  else Scale-=0.01;

  // use Scale variable ....

  e.preventDefault();
});

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

wheel event javascript give inconsistent values

javascript

mousewheel

touchpad