测量滚动速度 Javascript 和触发器事件

Question

我想在窗口滚动速度超过某个值时触发一个事件。我找到了一些有助于测量速度的代码，但我无法弄清楚为什么当速度超过 150 时不触发 if 语句。任何帮助将不胜感激。

const checkScrollSpeed = (function(settings){
    settings = settings || {};
    let lastPos, newPos, timer, delta, 
        delay = settings.delay || 50;
    function clear() {
        lastPos = null;
        delta = 0;
    }
    clear();
    return function(){
        newPos = window.scrollY;
        if ( lastPos != null ){ // && newPos < maxScroll 
            delta = newPos -  lastPos;
        }
        lastPos = newPos;
        clearTimeout(timer);
        timer = setTimeout(clear, delay);
        return delta;
    };
})();
const container = document.querySelector('#container');
window.addEventListener('scroll', function() {
    console.log(checkScrollSpeed());
    if (checkScrollSpeed() > 150) {
        console.log('150+')
        container.classList.add('red');
    }
});

#container {
  width: 75%;
  height: 170vh;
  background-color: yellow;
}
#container.red {
  background-color: red !important;
}

<div id="container"></div>

Answer 1

您连续调用checkScrollSpeed，当第二次调用时，delta 为 0。 删除console.log或将 delta 分配给某个变量并将其用于日志记录和条件。

Answer 2

我认为

这是因为您在console.log中第一次调用checkScrollSpeed()和在if语句中之间有一点延迟。您可以尝试仅调用一次，并保存 console.log 和 if 语句的值。它适用于我这个解决方案：

const checkScrollSpeed = (function(settings) {
  settings = settings || {};
  let lastPos, newPos, timer, delta,
      delay = settings.delay || 50;
  function clear() {
    lastPos = null;
    delta = 0;
  }
  clear();
  return function() {
    newPos = window.scrollY;
    if (lastPos != null) { // && newPos < maxScroll
      delta = newPos - lastPos;
    }
    lastPos = newPos;
    clearTimeout(timer);
    timer = setTimeout(clear, delay);
    return delta;
  };
})();
const container = document.querySelector('#container');
window.addEventListener('scroll', function() {
  var speed = checkScrollSpeed();
  console.log(speed);
  if (speed > 150) {
    console.log('150+');
    container.classList.add('red');
  }
});

#container {
  width: 75%;
  height: 170vh;
  background-color: yellow;
}
#container.red {
  background-color: red !important;
}

<div id="container"></div>