title: Sidescrolling jittery when changing directions
body: <p>I made my own sidescrolling parallax using jQuery and the mousewheel plugin. It's working great so far except for the fact that when I change directions of the scroll, it jitters first before actually scrolling (as though it's scrolling one unit to the previous side before actually moving to the correct one). I've tried adding a handler for this which supposedly stops the scroll completely.</p>
  
  <p>Here is my script so far:</p>
  
  <pre class="lang-js prettyprint-override"><code>var scroll = 0; // Where the page is supposed to be
  var curr = scroll; // The current location while scrolling
  var isScrolling = false; // Tracker to check if scrolling
  var previous = 0; // Tracks which direction it was previously
  var loop // setInterval variable
  
  function parallax() {
    isScrolling = true;
  
    // Loops until it's where it's supposed to be
    loop = setInterval(() =&gt; {
      if ( curr - scroll == 0 ) {
        clearInterval(loop);
        isScrolling = false;
        return;
      }
  
      // Move the individual layers
      $('.layer').each(function() {
        $(this).css('left', -curr * $(this).data("speed"));
      });
  
      // Add/subtract to current to get closer to where it's supposed to be
      curr += (scroll &lt; curr) ? -0.5 : 0.5;
  
    }, 25);
  }
  
  $(document).ready(() =&gt; {
    $('.scrolling-container').mousewheel((e, dir) =&gt; {
      e.preventDefault();
  
      // If the speed's magnitude is greater than 1, revert it back to 1
      if ( Math.abs(dir) &gt; 1) {
        dir = Math.sign(dir);
      }
  
      // If the direction changes, stop the current animation then set scroll to where it currently is
      if ( previous !== dir ) {
        previous = dir;
        isScrolling = false;
        scroll = curr;
        clearInterval(loop);
      }
  
      // If not at the left most scrolling to the left, add to scroll
      if ( scroll - dir &gt;= 0 ) scroll -= dir;
  
      // Call parallax function if it's not yet running
      if ( !isScrolling ) {
        parallax();
      }
    })
  })
  </code></pre>
  
  <p>I think it's easier to show so here's a codepen of the functional parts: <a href="https://codepen.io/ulyzses/pen/yLyoYZm" rel="nofollow noreferrer">https://codepen.io/ulyzses/pen/yLyoYZm</a></p>
  
  <p>Try scrolling for a while then change direction, the jittery behaviour should be noticeable.</p>