title: Horizontal scroll with arrows skipping scroll position on second click
body: <p>I am working on a horizontal scroll bar with right and left arrows for smooth scrolling.
  The idea is I'm getting getMenuPosition() + '100' to scroll left, and it does work on first click, but not on a second one.
  For right scrolling with getMenuPosition() - '100' it works as expected.
  I need to make the scrolling for right and left  progress by 100 each time a user click on the arrow.
  Any help will be much appreciated !</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// duration of scroll animation
  var scrollDuration = 300;
  // paddles
  var leftPaddle = document.getElementsByClassName('left-paddle');
  var rightPaddle = document.getElementsByClassName('right-paddle');
  // get items dimensions
  var itemsLength = $('.item').length;
  var itemSize = $('.item').outerWidth(true);
  // get some relevant size for the paddle triggering point
  var paddleMargin = 20;
  
  // get wrapper width
  var getMenuWrapperSize = function() {
    return $('.menu-wrapper').outerWidth();
  }
  var menuWrapperSize = getMenuWrapperSize();
  // the wrapper is responsive
  $(window).on('resize', function() {
    menuWrapperSize = getMenuWrapperSize();
  });
  // size of the visible part of the menu is equal as the wrapper size 
  var menuVisibleSize = menuWrapperSize;
  
  // get total width of all menu items
  var getMenuSize = function() {
    return itemsLength * itemSize;
  };
  var menuSize = getMenuSize();
  // get how much of menu is invisible
  var menuInvisibleSize = menuSize - menuWrapperSize;
  
  // get how much have we scrolled to the left
  var getMenuPosition = function() {
    return $('.menu').scrollLeft();
  };
  
  // finally, what happens when we are actually scrolling the menu
  $('.menu').on('scroll', function() {
  
    // get how much of menu is invisible
    menuInvisibleSize = menuSize - menuWrapperSize;
    // get how much have we scrolled so far
    var menuPosition = getMenuPosition();
  
    var menuEndOffset = menuInvisibleSize - paddleMargin;
  
    // show &amp; hide the paddles 
    // depending on scroll position
    if (menuPosition &lt;= paddleMargin) {
      $(leftPaddle).addClass('hidden');
      $(rightPaddle).removeClass('hidden');
    } else if (menuPosition &lt; menuEndOffset) {
      // show both paddles in the middle
      $(leftPaddle).removeClass('hidden');
      $(rightPaddle).removeClass('hidden');
    } else if (menuPosition &gt;= menuEndOffset) {
      $(leftPaddle).removeClass('hidden');
      $(rightPaddle).addClass('hidden');
    }
  
    // print important values
    $('#print-wrapper-size span').text(menuWrapperSize);
    $('#print-menu-size span').text(menuSize);
    $('#print-menu-invisible-size span').text(menuInvisibleSize);
    $('#print-menu-position span').text(menuPosition);
  
  });
  
  // scroll to left
  $(rightPaddle).on('click', function() {
    $('.menu').animate({
      scrollLeft: getMenuPosition() + '100'
    }, scrollDuration);
  });
  
  // scroll to right
  $(leftPaddle).on('click', function() {
    $('.menu').animate({
      scrollLeft: getMenuPosition() - '100'
    }, scrollDuration);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      margin: 3em;
  }
  
  * {
      padding: 0;
      margin: 0;
  }
  
  .menu-wrapper {
      position: relative;
      max-width: 500px;
      height: 100px;
      margin: 1em auto;
      border: 1px solid black;
      overflow-x: hidden;
      overflow-y: hidden;
  }
  
  .menu   {
      height: 120px;
      background: #f3f3f3;
      box-sizing: border-box;
      
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      }
      
      .item {
          display: inline-block;
          width: 100px;
          height: 100%;
          outline: 1px dotted gray;
          padding: 1em;
          box-sizing: border-box;
      }
  }
  
  .paddles {
  }
  .paddle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 3em;
  }
  .left-paddle {
      left: 0;
  }
  .right-paddle {
      right: 0;
  }
  .hidden {
      display: none;
  }
  
  .print {
      margin: auto;
      max-width: 500px;
    }
      
      span {
          display: inline-block;
          width: 100px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="menu-wrapper"&gt;
    &lt;ul class="menu"&gt;
      &lt;li class="item"&gt;1&lt;/li&gt;
      &lt;li class="item"&gt;2&lt;/li&gt;
      &lt;li class="item"&gt;3&lt;/li&gt;
      &lt;li class="item"&gt;4&lt;/li&gt;
      &lt;li class="item"&gt;5&lt;/li&gt;
      &lt;li class="item"&gt;6&lt;/li&gt;
      &lt;li class="item"&gt;7&lt;/li&gt;
      &lt;li class="item"&gt;8&lt;/li&gt;
      &lt;li class="item"&gt;9&lt;/li&gt;
      &lt;li class="item"&gt;10&lt;/li&gt;
      &lt;li class="item"&gt;11&lt;/li&gt;
      &lt;li class="item"&gt;12&lt;/li&gt;
      &lt;li class="item"&gt;13&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="paddles"&gt;
      &lt;button class="left-paddle paddle hidden"/&gt;
        
          &lt;button class="right-paddle paddle"&gt;
            &gt;
          &lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="print" id="print-wrapper-size"&gt;&lt;span&gt;&lt;/span&gt; Wrapper / visible menu size&lt;/div&gt;
  &lt;div class="print" id="print-menu-size"&gt;&lt;span&gt;&lt;/span&gt; Total menu size&lt;/div&gt;
  &lt;div class="print" id="print-menu-invisible-size"&gt;&lt;span&gt;&lt;/span&gt; Invisible menu size&lt;/div&gt;
  &lt;div class="print" id="print-menu-position"&gt;&lt;span&gt;&lt;/span&gt; Scroll position&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>