title: Treating each div as a "page" when scrolling
body: <p>I have a page that I'm building and I would like to make it that when I scroll (up or down) the page scrolls to the next div (each div is 100% the height of the window). And gets "fixed" there until you scroll again. An example of what I'm trying to accomplish can be seen here:</p>
  
  <p><a href="http://testdays.hondamoto.ch/" rel="nofollow noreferrer">http://testdays.hondamoto.ch/</a></p>
  
  <p>You will notice that when you scroll down, it automatically moves you to the next "div".</p>
  
  <p>What I've tried:</p>
  
  <ul>
  <li><p>Using the jQuery .scroll event combined with:</p>
  
  <pre><code>    function updatePosition() {
        if(canScroll) {
          var pageName;
          canScroll = false;
          var st = $(window).scrollTop();
          if (st &gt; lastScrollTop){
             // downscroll code
             if(pageNumber &lt; 7) {
                 pageNumber++;
             }
             pageName = '#' + getPageToScrollTo().id;
             $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
                 canScroll = true;
             });
          } else {
            // upscroll code
            if(pageNumber &gt; 0) {
                pageNumber--;
            }
            pageName = '#' + getPageToScrollTo().id;
            $('body').animate({ scrollTop: $(pageName).offset().top }, 2000, function() {
                 canScroll = true;
              });
          }
          lastScrollTop = st;
        }
      }
  </code></pre></li>
  </ul>
  
  <p>But the scroll event was getting called when the page was scrolling (animating), AND when the user scrolled. I only need it to be called when the user scrolls.</p>
  
  <p>Then I added:</p>
  
  <pre><code>var throttled = _.throttle(updatePosition, 3000);
  
  $(document).scroll(throttled);
  </code></pre>
  
  <p>From the Underscore.js library - but it still did the same.</p>
  
  <p>Finally, I browsed here a bit and found:</p>
  
  <p><a href="https://stackoverflow.com/questions/1659204/call-scroll-only-when-user-scrolls-not-when-animate">Call Scroll only when user scrolls, not when animate()</a></p>
  
  <p>But I was unable to implement that solution. Is there anyone that knows of any libraries or methods to get this working?</p>
  
  <p>EDIT:
  Solution based on Basic's answer:</p>
  
  <pre><code>  function nextPage() {
          canScroll = false;
          if(pageNumber &lt; 7) {
              pageNumber++;
          }
          pageName = getPageToScrollTo();
          $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
              canScroll = true;
          });
      }
  
      function prevPage() {
          canScroll = false;
          if(pageNumber &gt; 0) {
          pageNumber--;
        }
        pageName = getPageToScrollTo();
        $('html, body').stop().animate({ scrollTop: $(pageName).offset().top }, 1000, function() {
           canScroll = true;
        });
      }
  
      //--Bind mouseWheel
      $(window).on(mousewheelevt, function(event) {
          event.preventDefault();
          if(canScroll){
            if(mousewheelevt == "mousewheel") {
                if (event.originalEvent.wheelDelta &gt;= 0) {
                  prevPage();
                } else {
                  nextPage();
                }
            } else if(mousewheelevt == "DOMMouseScroll") {
                if (event.originalEvent.detail &gt;= 0) {
                  nextPage();
                } else {
                  prevPage();
                }
            }
          }
      });
  </code></pre>