title: Scroll tabs with animation - Stop setInterval immediately on mouseup
body: <p>I've make scroll buttons <kbd>←</kbd>, <kbd>→</kbd> and while I'm pressing, the tabs are scrolling.</p>
  <p>When I scroll to right and back to the begin, the tabs overflow area. How not to let this happen?</p>
  <p><img src="https://i.stack.imgur.com/QTNQh.png" alt="Problem" /></p>
  <p><strong>Code:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($) {
  
      var hidWidth;
      var scrollBarWidths = $('#page-tabs .scroller-right').width() + $('#page-tabs .scroller-left').width();
  
      var widthOfList = function() {
          var itemsWidth = 0;
          $('#page-tabs .list li').each(function() {
              var itemWidth = $(this).outerWidth();
              itemsWidth += itemWidth;
          });
          return itemsWidth;
      };
  
      var widthOfHidden = function() {
          return (($('#page-tabs .wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
      };
  
      var getLeftPosi = function() {
          return $('#page-tabs .list').position().left;
      };
  
      var timeout;
      $list = $('#page-tabs .list');
      $('#page-tabs .scroller-right').on('mousedown', function(event) {
          event.preventDefault();
          timeout = setInterval(function() {
              move = widthOfHidden();
              move = move &lt; -10 ? -10 : move;
  
              if (move &gt;= 0) {
                  clearInterval(timeout);
                  return false;
              } else {
                  $list.animate({
                      left: "+=" + move + "px"
                  }, 10, 'linear');
              }
          }, 10);
      }).on('mouseup mouseleave', function(event) {
          event.preventDefault();
          clearInterval(timeout);
      });
  
      $('#page-tabs .scroller-left').on('mousedown', function(event) {
          event.preventDefault();
          timeout = setInterval(function() {
              move = getLeftPosi();
              move = move &lt; -10 ? -10 : move;
  
              if (move &gt;= 0) {
                  clearInterval(timeout);
                  //$list.animate({left:"0px"},300, 'linear');
                  return false;
              } else {
                  $list.animate({
                      left: "-=" + move + "px"
                  }, 10, 'linear');
              }
  
          }, 10);
  
      }).on('mouseup mouseleave', function(event) {
          event.preventDefault();
          clearInterval(timeout);
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#page-tabs {
      position: relative;
      width: 100%;
      margin-top: 50px;
  }
  
  .scroller {
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
  }
  
  .scroller-left {
      left: 0;
  }
  
  .scroller-right {
      right: 0;
  }
  
  .wrapper {
      position: relative;
      margin: 0 34px;
      overflow: hidden;
      height: 30px;
      background: #454545;
  }
  
  ul {
      position: absolute;
      margin: 0;
      padding: 0;
      list-style: none;
      min-width: 3000px;
  }
  
  li {
      display: inline-block;
      margin: 0;
      padding: 10px;
      background: #CCC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="page-tabs"&gt;
      &lt;div class="wrapper"&gt;
          &lt;ul class="list"&gt;
              &lt;li&gt;Aba nº 1&lt;/li&gt;
              &lt;li&gt;Aba nº 2&lt;/li&gt;
              &lt;li&gt;Aba nº 3&lt;/li&gt;
              &lt;li&gt;Aba nº 4&lt;/li&gt;
              &lt;li&gt;Aba nº 5&lt;/li&gt;
              &lt;li&gt;Aba nº 6&lt;/li&gt;
              &lt;li&gt;Aba nº 7&lt;/li&gt;
              &lt;li&gt;Aba nº 8&lt;/li&gt;
              &lt;li&gt;Aba nº 9&lt;/li&gt;
              &lt;li&gt;Aba nº 10&lt;/li&gt;
              &lt;li&gt;Aba nº 11&lt;/li&gt;
              &lt;li&gt;Aba nº 12&lt;/li&gt;
              &lt;li&gt;Aba nº 13&lt;/li&gt;
              &lt;li&gt;Aba nº 14&lt;/li&gt;
              &lt;li&gt;Aba nº 15&lt;/li&gt;
              &lt;li&gt;Aba nº 16&lt;/li&gt;
              &lt;li&gt;Aba nº 17&lt;/li&gt;
              &lt;li&gt;Aba nº 18&lt;/li&gt;
              &lt;li&gt;Aba nº 19&lt;/li&gt;
              &lt;li&gt;Aba nº 20&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;button class="scroller scroller-left"&gt;&amp;larr;&lt;/button&gt;
      &lt;button class="scroller scroller-right"&gt;&amp;rarr;&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <h3><a href="http://jsfiddle.net/dakwdrg7/" rel="nofollow noreferrer">JsFiddle</a></h3>
  <p><sub><sub>Sorry, my English is not very good.</sub></sub></p>