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/

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

1 个答案: