title: How to listen to only the first scroll event on javascript/jquery?
body: <p>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.</p>
  
  <p>My HTML looks something like this:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="item1"&gt;&lt;/div&gt;
    &lt;div id="item2"&gt;&lt;/div&gt;
    &lt;div id="item3"&gt;&lt;/div&gt;
    &lt;div id="item4"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my JS looks something like this:</p>
  
  <pre><code>var pos = 0;
  var isScrolling = false;
  var id = 1;
  
  $(window).scroll(function() {
    if (!isScrolling) {
      isScrolling = true;
      var curPos = $(this).scrollTop();
      if (curPos &gt; pos) {
        // scrolling down
        if (id &lt; 4) {
          id++;
          $('html, body').animate({
            scrollTop: $('#item' + id).offset().top
          }, 500);
        }
      } else {
        // scrolling up
        if (id &gt; 1) {
          id--;
          $('html, body').animate({
            scrollTop: $('#item' + id).offset().top
          }, 500);
        }
      }
      isScrolling = false;
      pos = curPos;
    }
  });
  </code></pre>
  
  <p>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)?</p>