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

Question

I'm currently working on implementing my own version of snap-scrolling using vanilla JavaScript, and while I've got it mostly working as of now, I'm having trouble handling the scroll events.

My HTML looks something like this:

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

And my JS looks something like this:

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;
  }
});

What currently happens is when I scroll down my mouse wheel, it will do the animation but will keep proceeding to the next divs because of the multiple scroll events being fired. How do I make it so that it only listens to the first event (whether it scrolls up or down)?

Answer 1

A hacky way is to use timer:

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

You can register one time listeners in jQuery using jQuery.one .

EDIT: You can use the complete callback of jQuery.animate to stop/start responding to scroll events.

var isScrolling = false;
$(window).on('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,function(){
                    isScrolling = false;
                });
            }
        } else {
            // scrolling up
            if (id > 1) {
                id--;
                $('html, body').animate({
                    scrollTop: $('#item' + id).offset().top
                }, 500,function(){
                    isScrolling = false;
                });
            }
        }
        pos = curPos;
    }
});

Answer 3

There's no easy way to deal with what it is known as kinetic scrolling . Browsers do not provide developers a proper way to distinguish the meaningful scrolling from the inertial ones.

However, there are some attempts out there that aims to solve this issue, such as Lethargy . Not 100% ideal, but very close to it.

Other than that, you can take a look at libraries like fullPage.js where another attempt to solve the issue was made.