title: Keep scrolling the container when mouse stops
body: <p>I have lots of horizontal scroll containers, which I'm moving with mouseover. How can I keep scrolling them while mouse is also stopped in pure javascript?</p>
  
  <p>I tried adding helper function with timeout, but it turned out to animate strangely. </p>
  
  <p>Thanks for your help!</p>
  
  <p>Here is a snippet of code I'm currently using - hover over the rows to scroll them left right.</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>window.onload = function() {
  var gamerow = document.querySelectorAll(".gamerow");
  if(gamerow) {
  
  function indexInClass(node) {
    var className = node.className;
    var num = 0;
    for (var i = 0; i &lt; gamerow.length; i++) {
      if (gamerow[i] === node) {
        return num;
      }
      num++;
    }
    return -1;
  }
   
  var scrolla = [0,0,0,0,0,0];
  
  for (var i = 0; i &lt; gamerow.length; i++) { 
  var item = gamerow[i]; 
  
  item.addEventListener('mousemove', function scrollHoverly(e) {
   
   e = window.event || e;
  var container_w = this.offsetWidth;
  var max_scroll = this.scrollWidth - this.offsetWidth;
  this.setAttribute("id", "scrolling");
  var x = indexInClass(document.getElementById('scrolling'));
  
  var mouse_x = e.clientX - this.offsetLeft;
  var mouseperc = 100 * mouse_x / container_w;
  var speed = mouseperc - 50; 
  
  
    if (speed !== 0) {
        scrolla[x] += speed / 10;
          if (scrolla[x] &lt; 0) scrolla[x] = 0;
          if (scrolla[x] &gt; max_scroll) scrolla[x] = max_scroll;
        this.scrollLeft = scrolla[x];
    
    }
   
  } );
  
  item.addEventListener('mouseleave', function stopHoverly(e) {
   e = window.event || e;
  var container_w = this.offsetWidth;
  var max_scroll = this.scrollWidth - this.offsetWidth;  
  var speed = 0;
  this.setAttribute("id", "scrolling");
  var x = indexInClass(document.getElementById('scrolling'));
   
    if (speed !== 0) {
        scrolla[x] += speed / 15;
          if (scrolla[x] &lt; 0) scrolla[x] = 0;
          if (scrolla[x] &gt; max_scroll) scrolla[x] = max_scroll;
        this.scrollLeft = scrolla[x];
      }
  this.removeAttribute("id","scrolling");
  } );
  
   }
  };
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.gamerow {
      padding: 0px 15px;
      text-align: left;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden;
      transform: scale(1);
  }
  .inside {
    width: 150px;
    height: 50px;
      display: inline-block;
      text-align: center;
      border: 2px solid #000;
      margin: 0px 8px 8px 0px;
      flex: 0 0 auto;
      box-shadow: -1px 1px 1px #adadad;
      border-radius: 5px;
  }
  ::-webkit-scrollbar {
      display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;container&gt;
  &lt;div class="gamerow"&gt;
  &lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gamerow"&gt;
  &lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gamerow"&gt;
  &lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gamerow"&gt;
  &lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gamerow"&gt;
  &lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;&lt;div class="inside"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/container&gt;</code></pre>
  </div>
  </div>
  </p>