时间戳

首页 > 解决方案 > JS/JQuery 中的去抖滚动事件是如何工作的？

javascript - JS/JQuery 中的去抖滚动事件是如何工作的？

问题描述

滚动事件的触发方式比我想要的要频繁。如果您向下滚动（后跟动画）并摆脱当前元素的 .swap 类，它应该做的就是将 .swap 类提供给下一个 Sibling。同样的事情只是向上。现在发生的情况是，如果向下/向上滚动，它基本上会转到最后一个元素和第一个元素。这是一个单页机，只是在不同的 div 之间切换。

我已经尝试过 Debounce、Throttling 和 requestAnimationFrame，但到目前为止还没有成功。例如：https ://css-tricks.com/debouncing-throttling-explained-examples/

非常感谢！

HTML：

<div class="div1 swap">
  <h1>Hello</h1>
</div>
<div class="div2">
  <h1>Stack</h1>
</div>
<div class="div3">
  <h1>Overflow</h1>
</div>
<div class="div4">
  <h1>Please</h1>
</div>
<div class="div5">
  <h1>Help</h1>
</div>

CSS：

.div1, .div2, .div3, .div4, .div5{
  visibility: hidden;
  position: fixed;
}
.swap{
  visibility: visible;
  -webkit-animation: slide-in-left .8s ease-out both;
          animation: slide-in-left .8s ease-out both;
}

JS：

window.onscroll = function(event) {
  var aktiv = document.querySelector('.swap');
  if(this.oldScroll > this.scrollY){
    console.log("Up");
    aktiv.previousElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
  else{
    console.log("Down");
    aktiv.nextElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
  this.oldScroll = this.scrollY;
}

标签： javascriptjqueryscrolldebouncing

解决方案

为滚动距离添加一些阈值，就像现在一样，即使您滚动 1px。你展示下一个元素。

window.onscroll = function(event) {
  var aktiv = document.querySelector('.swap');
  var diff = this.oldScroll - this.scrollY;
  var delta = 100; // Or some element height

  // If scolled too little - do nothing
  if (Match.abs(diff) <= delta) {
     return;
  }

  if(diff < 0){
    console.log("Up");
    aktiv.previousElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
  else{
    console.log("Down");
    aktiv.nextElementSibling.classList.toggle('swap')
    aktiv.classList.toggle('swap')
  }
  this.oldScroll = this.scrollY;
}

去抖动事件使用setTimeout：

var timer;

window.onscroll = function (event) {
    var self = this;
    clearTimeout(timer);
    timer = setTimeout(function () {
        [...rest of code...]
    }, 50)
}

推荐阅读