wheel event javascript给出不一致的值

Question

我正在使用html / javascript / css进行缩放功能，
我将wheel事件侦听器附加到了div标签上，console.log(event.wheelDelta)
并且可以很好地与鼠标配合使用。在console.log给出了放大和负另有120正倍数

问题出在触摸板上

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

Answer 1

event.wheelDelta不是在每个浏览器中都定义，不推荐使用，并且根据其Mozilla文档不再使用它。您可以使用值event.deltaX和event.deltaY。有关更多信息，请参阅Mozilla车轮文档。

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

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

我不会依赖wheel值，而是听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;
});