轮事件javascript给出不一致的值

时间:2016-08-14 13:43:04

标签: javascript mousewheel touchpad

我正在使用html / javascript / css进行缩放功能 我将wheel事件监听器附加到div标记 和console.log(event.wheelDelta)
它适用于鼠标。 console.log给出放大120的正倍数,否则为负 enter image description here
问题在于触摸板
enter image description here
放大手势时,它不会提供一致的值。中间有一些-120。因此,变焦非常粗糙 如何实现平滑缩放或如何使用触控板获得一致的wheelDelta

3 个答案:

答案 0 :(得分:2)

event.wheelDelta未在每个浏览器中定义,已弃用且不应再根据its Mozilla documention使用。您可以使用值event.deltaXevent.deltaY。有关详细信息,请参阅Mozilla wheel documentation

我在Google Chrome和Mozilla Firefox中测试了以下代码。价值观非常不同。 Google Chrome浏览器始终返回event.deltaY100-100。在Mozilla Firefox中,它始终返回值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;
});

答案 1 :(得分:0)

使用event.wheelDeltaYevent.deltaY
鼠标console.log(event.wheelDeltaY)
enter image description here
用于触摸板:
enter image description here
而不是-120,它给出了-1.120,它出现在wheelDelta中实际上是水平滚动(wheelDeltaX)的结果。(当你尝试使用触摸板放大时,也可能有轻微的水平运动)<登记/> 当它为0时不要缩放,你将获得一致的平滑变焦!

答案 2 :(得分:0)

var Scale = 1;

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

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

  // use Scale variable ....

  e.preventDefault();
});