Question

我目前正致力于使用vanilla JavaScript实现我自己的快照滚动版本，虽然我现在大部分都在使用它，但我在处理滚动事件方面遇到了麻烦。

我的HTML看起来像这样：

<div class="container">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
</div>

我的JS看起来像这样：

var pos = 0;
var isScrolling = false;
var id = 1;

$(window).scroll(function() {
  if (!isScrolling) {
    isScrolling = true;
    var curPos = $(this).scrollTop();
    if (curPos > pos) {
      // scrolling down
      if (id < 4) {
        id++;
        $('html, body').animate({
          scrollTop: $('#item' + id).offset().top
        }, 500);
      }
    } else {
      // scrolling up
      if (id > 1) {
        id--;
        $('html, body').animate({
          scrollTop: $('#item' + id).offset().top
        }, 500);
      }
    }
    isScrolling = false;
    pos = curPos;
  }
});

当前发生的事情是，当我向下滚动鼠标滚轮时，它将执行动画，但由于多个滚动事件被触发，它将继续前进到下一个div。我该怎么做才能只听第一个事件（无论是向上还是向下滚动）？

Answer 1

一种hacky方式是使用计时器：

var pos = 0;
var isScrolling = false;
var id = 1;
var lastScrollTime = $.now();

$(window).scroll(function() {
  if ((!isScrolling)&&((($.now()-lastScrollTime)>3000)) {
    isScrolling = true;
    var curPos = $(this).scrollTop();
    if (curPos > pos) {
      // scrolling down
      if (id < 4) {
        id++;
        $('html, body').animate({
          scrollTop: $('#item' + id).offset().top
        }, 500);
      }
    } else {
      // scrolling up
      if (id > 1) {
        id--;
        $('html, body').animate({
          scrollTop: $('#item' + id).offset().top
        }, 500);
      }
    }
    isScrolling = false;
    pos = curPos;
    lastScrollTime = $.now();
  }
});

Answer 2

您可以使用jQuery.one在jQuery中注册一次监听器。

编辑：您可以使用complete的{{1}}回调来停止/开始回复滚动事件。

jQuery.animate

Answer 3

没有简单的方法来处理它所谓的动态滚动。浏览器不会为开发人员提供一种正确的方法来区分有意义的滚动和惯性滚动。

但是，有一些旨在解决此问题的尝试，例如Lethargy。不是100％理想，但非常接近它。

除此之外，你可以看看像fullPage.js这样的图书馆，在那里又做了另一次解决问题的尝试。

如何只听javascript / jquery上的第一个滚动事件？

3 个答案: