在连续滚动的设备上只听一次滚动方向

Question

我们正在尝试在我们网站的主页上制作伪滚动效果，但我们遇到了与触摸板和其他数字滚动鼠标的滚动机制有关的问题（它们具有持续的滚动效果和缓动时间函数）。

我们希望能够监听滚动的方向（当前使用 .on('scroll mousewheel') ）来确定滚动的方向（因此决定我们是否应该显示上一张或下一张幻灯片）但不是监听每个滚动事件，因为这会导致一系列闪烁的、引起癫痫发作的变化（这些变化根据滚动值使用 javascript 隐藏/显示）。

我们目前有一个 setTimeout() 函数，该函数在执行实际进行更改的代码之前等待每个滚动事件 50 毫秒，但这可能导致上述设备上的等待时间比预期的要长，因为它们能够连续滚动刷卡，从而不断刷新 50 毫秒的等待。这也没有考虑到数字滚轮具有的缓动滚动功能，这使得它在滚动结束时仍然可以多次触发。

因此，从本质上讲，我们似乎在寻找以下之一：

1. 监听鼠标滚轮方向的方向没有 触发该滚动的每个实例的函数。
2. 我们尚未考虑的另一种解决方法。

这是与此相关的当前 javascript 部分：

var timer;
$('html').on ('scroll mousewheel', function (e) {
  if(timer) {
    window.clearTimeout(timer);
  }

  timer = window.setTimeout(function() {

  var delta = e.originalEvent.wheelDelta;

    if((window.innerHeight + window.pageYOffset ) >= document.body.offsetHeight && delta < 0){

      $(allSections[scrollNumber]).hide();
      $(".cc-nav-circle").removeClass("active");
      if(scrollNumber >= allSections.length - 1){
        scrollNumber = 0; 
      } else {
        scrollNumber++;
      }  

    } else if($(window).scrollTop() === 0 && delta > 0){

      $(allSections[scrollNumber]).hide();
      $(".cc-nav-circle").removeClass("active");
      if(scrollNumber <= 0){
        scrollNumber = allSections.length - 1; 
      } else {
        scrollNumber--;
      }

    }

    $(allSections[scrollNumber]).show();
    $(allCircles[scrollNumber]).addClass("active");

  }, 50);  

});

这是本网站当前的开发版本：https://unink-marketing.squarespace.com/

Answer 1

您可以立即滚动并忽略进一步的滚动事件，直到 50 毫秒计时器完成，而不是将滚动功能延迟到用户完成滚动。请参阅下面的更新代码

var timer;
var justScrolled = false;
$('html').on ('scroll mousewheel', function (e) {
  if(timer) {
    window.clearTimeout(timer);
  }

  timer = window.setTimeout(function() {
    justScrolled = false;
  }, 50); 

  if(justScrolled) {
    return;
  }

  justScrolled = true;
  // Do scroll stuff 

});