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

Question

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

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

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

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

监听鼠标滚轮方向无在该滚动条的每个实例中触发函数。
我们尚未考虑的另一种解决方法。

这是 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 

});

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

Listening to the scroll direction only ONCE on devices with continuous scroll

javascript

scroll

logic

settimeout

mousewheel