Question

问题前面： 如何更改此脚本，以便向上或向下滚动发生整齐的单个函数调用？

这是一个 JSFiddle ，可以清楚地表示问题。

以下脚本根据用户滚动方向的方向成功推出警报：

//Firefox
$('html').on('DOMMouseScroll', function(e){
    var delta = e.originalEvent.detail;

    if (delta > 0) {

        alert('You scrolled up');

    } else if (delta < 0) {

        alert('You scrolled down');
    }

});

//Everything else
$('html').on('mousewheel', function(e){
var delta = e.originalEvent.wheelDelta;

if (delta < 0) {

    alert('You scrolled down');

} else if (delta > 0) {

    alert('You scrolled up');
}
});

但是有一个问题： 当我向上或向下滚动时，如果用户向上或向下滚动，则会多次调用该函数，而不是仅仅执行一次。

所以，我的问题是：如何更改此脚本，以便向上或向下滚动进行整齐的单一函数调用？

已知的解决方案理念： Underscore.js提供了一个功能

_.debounce(<function>,delay)

但是这会导致延迟并导致错误修复。

Answer 1

您可以使用基于标志的简单解决方案

var flag;
//Everything else
$('html').on('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    if (flag != 1 && delta < 0) {
        flag = 1;
        //alert('You scrolled down');
        $(".notify").append("<p>You scrolled down</p>");

    } else if (flag != 2 && delta > 0) {
        flag = 2;
        //alert('You scrolled up');
        $(".notify").append("<p>You scrolled up</p>");
    }
});

演示：Fiddle

您也可以将两个处理程序组合在一起

var flag;
$('html').on('mousewheel DOMMouseScroll', function (e) {
    var delta = e.originalEvent.wheelDelta || e.originalEvent.detail;

    if (flag != 1 && delta < 0) {
        flag = 1;
        $(".notify").append("<p>You scrolled down</p>");
    } else if (flag != 2 && delta > 0) {
        flag = 2;
        $(".notify").append("<p>You scrolled up</p>");
    }
});

演示：Fiddle

Answer 2

这将立即为您提供一个活动。

如果用户向一个方向滚动，暂停一段时间，然后继续滚动，则会为每个方向触发一个事件。

（如果方向发生变化，Arun的回答只会触发一个新事件。）

我不确定你想要的是什么。如果暂停时间足够长，我个人倾向于发起另一场比赛。

var timeout;
var direction;

$('html').on('mousewheel', function (e) {
    var delta = e.originalEvent.wheelDelta;

    clearTimeout(timeout);
    timeout = setTimeout(function() {
        direction = 0;
    }, 500); //adjust as necessary

    if (delta < 0) {
        if(direction != -1) {
            direction = -1;
            $(".notify").append("<p>You scrolled down</p>");
        }
    } else if (delta > 0 && direction != 1) {
        if(direction != 1) {
            direction = 1;
            $(".notify").append("<p>You scrolled up</p>");
        }
    }
});

Answer 3

使用one事件代替on

$('html').one('DOMMouseScroll', function(e){
var delta = e.originalEvent.detail;

if (delta > 0) {

    alert('You scrolled up');

} else if (delta < 0) {

    alert('You scrolled down');
}

});

//Everything else
$('html').on('mousewheel', function(e){
var delta = e.originalEvent.wheelDelta;

if (delta < 0) {

alert('You scrolled down');

} else if (delta > 0) {

alert('You scrolled up');
}
});

单个函数调用滚动事件？

3 个答案: