javascript - 如何检测用户鼠标滚轮滚动距离？

Question

我正在尝试检测用户滚动，如果向左和向右滚动则触发并执行某些操作。 但是，如果用户使用触控板滚动到顶部或底部，那么它会意外地向左或向右滚动。

我认为，可能不只是检查每次滚动定义的计时器还需要检查用户滚动距离是否小于 20，我们可以将其区分为意外并且不做任何事情。

我找不到检查用户滚动距离的方法，元素不可滚动，所以不能使用 scrollTop scrollLeft....

有什么想法吗？

var scroll_timer;

$('img').bind('mousewheel', function(e) {
    if (e.originalEvent.wheelDeltaX < 0) {
        clearTimeout(scroll_timer);
        scroll_timer = setTimeout(function() {
            // .. do something
            // console.log('right');
        }, 200);
    } else if (e.originalEvent.wheelDeltaX > 0) {
        clearTimeout(scroll_timer);
        scroll_timer = setTimeout(function() {
            // .. do something
            // console.log('left');
        }, 200);
    }
});

这是我的 JSFiddle

Answer 1

看起来您可以使用 e.originalEvent.wheelDeltaX 获取滚动距离值。然后，您可以使用 e.originalEvent.wheelDeltaY 来查看用户是否垂直滚动多于水平滚动，并在为真时触发内容。

这是一个演示，它通过测试滚动 Y 的值是否小于滚动 X 的值然后允许您在它位于左侧或右侧时触发。似乎可以在我的 Mac 触控板上使用

var scroll_timer;

$('img').bind('mousewheel', function(e) {

    if((Math.abs(e.originalEvent.wheelDeltaX) > Math.abs(e.originalEvent.wheelDeltaY)))
    {
        if (e.originalEvent.wheelDeltaX < 0) {
            clearTimeout(scroll_timer);
            scroll_timer = setTimeout(function() {
                // .. do something
                console.log('right');
            }, 200);
        } else if (e.originalEvent.wheelDeltaX > 0) {
            clearTimeout(scroll_timer);
            scroll_timer = setTimeout(function() {
                // .. do something
                console.log('left');
            }, 200);
        }
    }
});

http://jsfiddle.net/andyface/5CfgT/