title: Having trouble getting the scroll animation to not trigger the scroll event
body: <p>I currently have  a number of div tags that can be seen below that are each the height of the viewport.</p>
  
  <pre><code>&lt;!-- .current represents the div the user is currently viewing --&gt;
  &lt;div class="full-height current" id="id1"&gt;
      &lt;div class="container"&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="full-height" id="id2"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="full-height" id="id3"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="full-height" id="id4"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="full-height" id="id5"&gt;
      &lt;div class="container"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am attempting to implement a feature where upon a user scrolling, the window will scroll to the next div tag, always having only one div in view at a time. The way I implemented it works great, except for the fact that the animation triggers the scroll event again, resulting in an endless loop of the page scrolling once the user scrolls at all. I attempted to fix this by having a variable that will stop the event from triggering if the animation is in progress, but it does not seem to work. I am aware that I didn't do it for the scroll up, but I just wanted to see if it worked for the down first.</p>
  
  <pre><code>$(window).scroll(function(event) {
      var scrollTop = $(this).scrollTop();
  
      // If user scrolls down
      if ((scrollTop &gt; lastScrollTop) &amp;&amp; $(".current").next("div").length &gt; 0) {
          if (animating == false) {
              console.log("down");
  
              $(".current").next("div").addClass("current");
              $(".current").first().removeClass("current");
  
              animating = true;
              $("html, body").animate({
                  scrollTop: $(".current").offset().top    
              }, 1000, function() {animating = false});   
          }
      // If user scrolls up
      } else {
          if ($(".current").prev("div").length &gt; 0) {
              console.log("up");
  
              $(".current").prev("div").addClass("current");
              $(".current").last().removeClass("current");
  
              $("html, body").animate({
                  scrollTop: $(".current").offset().top    
              }, 1000);
          }            
      }
  
      lastScrollTop = scrollTop;
  });
  </code></pre>
  
  <p>CSS included just in case. The 100vh - 111px is due to a fixed navbar at the top that is 111px high</p>
  
  <pre><code>/* Makes the element take up the entire height of the screen */
  .full-height{
      height: -o-calc(100vh - 111px); /* opera */
      height: -webkit-calc(100vh - 111px); /* google, safari */
      height: -moz-calc(100vh - 111px); /* firefox */
  }
  
  #id1 {
      background-color: red;
  }
  #id2 {
      background-color: blue;
  }
  
  #id3 {
      background-color: yellow;
  }
  #id4 {
      background-color: green;
  }
  
  #id5 {
      background-color: purple;
  }
  </code></pre>
  
  <p>If anyone could give me any ideas for fixing my problem, that would be great.</p>