Question

我正在向下滚动显示一个元素，并在再次向上滚动时隐藏它。不使用setTimeout，这可以正常工作。但是，使用setTimeout会导致在向下滚动时以短间隔添加和删除“display”类。如何在保持延迟的同时避免这种情况？

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 110) {
    menuButton.classList.add('display');
  } else {
    setTimeout(function() {
      menuButton.classList.remove('display');
    }, 400);
  }
}

Answer 1

setTimeout执行此功能后，您必须检查滚动位置。超时后可能会有所不同。

编辑：如果您不希望多次触发超时，可以使用clearTimeout清除超时。

var timerId;
onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 110) {
    menuButton.classList.add('display');
    clearTimeout(timerId);
  } else {
    timerId = setTimeout(function() {
      if (!(scrollTop > 110)) {
          menuButton.classList.remove('display');
      }
    }, 400);
  }
}

Answer 2

超时仍然是从之前的事件开始。这是我的修复：

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  var timer;
  if (scrollTop > 110) {
    window.clearTimeout(timer);
    menuButton.classList.add('display');
  } else {
    timer = window.setTimeout(function() {
          menuButton.classList.remove('display');
      }, 400);
  }
}

带有setTimeout的if / else语句会导致闪烁

2 个答案: