Question

我已经为我正在处理的网站创建了一个带有javascript的滚动系统，并且我在排除所有输入时遇到了一些麻烦。

这是我的问题的一个例子，尝试滚动，你会看到问题是什么。 http://fadedmeadows.com/test/

＆＃13;

var index = 0;
var scroll2 = true;
$(document).ready(function() {
  $("#home").css({
    "color": "#eb0e0e",
  });
});

$(window).bind('mousewheel DOMMouseScroll touchmove', function(event) {
  scroll2 = true;
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // scroll up
    if (index > 4) index = 4;

    if (index == 4 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content3").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 3 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content2").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 2 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
    if (index == 1 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("header").offset().top
      }, 1000);
      index--;
      scroll2 = false;
    }
  } else {
    // scroll down
    if (index < 0) index = 0;
    if (index == 0 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 1 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content2").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 2 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content3").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
    if (index == 3 && scroll2 == true) {
      $('html, body').animate({
        scrollTop: $("#content4").offset().top
      }, 1000);
      index++;
      scroll2 = false;
    }
  }
});

＆＃13;

Answer 1

不确定这是否对您有所帮助，但我有实际事件的监听器，并且只要收到事件就会设置超时。

如果事件在上一次超时到期之前触发，我将取消之前的超时。超时实际上会触发操作。因此，相互发生的类似事件流被沉默并被丢弃。

我主要用于窗口调整大小事件，但它也可能适用于此。纯js代码看起来像这样：

var resizeTimeout = null, wait = 200;
window.onresize = function(){
  if (resizeTimeout !== null) {
    window.clearTimeout(resizeTimeout);
    resizeTimeout = null;
  }
  resizeTimeout = setTimeout(function(){
    //do whatever is needed to deal with window resize.
  }, wait);
}

（但是我有一个名为Timer的包装“类”，它可以让它更干净一些）

排队停止滚动功能

1 个答案: