Question

重要提示：我确实知道如何检测滚动是向上还是向下（并且该网站上也有一些类似的已回答问题），但是我不知道如何执行以下操作：我想执行一些操作车轮滚动是向上还是向下的功能；我有以下代码：

window.addEventListener('wheel',wheel);
    function wheel(e){
        delta = e.deltaY;
        if (delta > 0) {
            Func1();
        } else  {
            Func2();
        }
    }

但是使用此代码，在wheel事件继续进行的同时始终会调用函数，而我只需要在每次发生新的wheel事件时都调用一次即可。我该如何解决？

Answer 1

在执行功能时，您将需要增加大约300毫秒的延迟。超时后，如果仍发生静态事件，请通过清除较旧的事件来设置新的超时。

检查以下代码段。

var wheel_timer = 0

window.addEventListener('wheel', function (e) {
    clearTimeout(wheel_timer);
    wheel_timer = setTimeout(function () {
        wheel(e)
    }, 10)
});

function wheel(e) {
    delta = e.deltaY;
    if (delta > 0) {
        Func1();
    } else {
        Func2();
    }
}

一个建议可以是不使用wheel事件，也可以使用scroll事件。

编辑：改进后的答案可以立即得到答复。

Answer 2

（已更新，以支持同一方向上的多个滚动，并在我们开始滚动时立即调用每个函数）

您可以保存状态：

var scrollingDirection = 0; //idle
var lastScroll = 9999;
var scrollIdleTime = 300; // time interval that we consider a new scroll event
window.addEventListener('wheel',wheel);
function wheel(e){
    var delta = e.deltaY;
    var timeNow = performance.now();
    if (delta > 0 && ( scrollingDirection != 1 || timeNow > lastScroll + scrollIdleTime) ) {
        Func1();
        scrollingDirection = 1;
    } else if (delta < 0 && ( scrollingDirection != 2 || timeNow > lastScroll + scrollIdleTime)) {
        Func2();
        scrollingDirection = 2;
    }
    lastScroll = timeNow;
}

Answer 3

var scrolled = true;
window.addEventListener('wheel',wheel);
    function wheel(e){
    if(scrolled == true){
    scrolled = false
        delta = e.deltaY;
        if (delta > 0) {
            Func1();
        } else  {
            Func2();
        }
    }
   }
    function Func1(){
    console.log('1'+ scrolled);
    }
    
    function Func2(){
    console.log('2' + scrolled)
    }

您可以通过在滚动功能内添加if-else块来实现此目的，

按照我上面的代码片段，变量scrolled默认情况下设置为true，当您滚动scrolled变量时，它变为false，因此第二次不再输入if块。

车轮滚动事件仅触发一次js

3 个答案: