Question

我们正在尝试在网站首页上实现伪滚动效果，但是滚动力学触摸板和其他数字滚动鼠标却遇到了问题（它们具有持续的滚动效果，且时序较为宽松）功能）。

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

我们目前有一个setTimeout（）函数，在执行实际进行更改的代码之前，每个滚动事件要等待50ms，但这会导致上述设备的等待时间比预期的更长，这是因为它们能够在屏幕上连续滚动滑动，从而持续刷新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

您可以立即滚动，而无需忽略其他滚动事件，直到50ms计时器完成为止，而不是将滚动功能延迟到用户完成滚动为止。请参阅下面的更新代码

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 

});

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

1 个答案: