title: Auto scroll a horizontal div
body: <p>I thought this would be fairly easy but I'm stuck. </p>
  
  <p>My code is executing and ignoring the setTimeout.</p>
  
  <p>I am getting the scroll width of my element, then saying while <code>i</code> is less than the width (<code>flavoursScrollWidth</code>), move the horizontal scroll 1px along every second.</p>
  
  <p>That isn't what is happening though, it just executes each pixel movement almost instantly.</p>
  
  <p>I also tried taking the code out of the load event and taking the setTimeout out of the while loop. Then creating a function containing the while loop, and calling the function in a setInterval. Didn't help.</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>const flavoursContainer = document.getElementById("flavoursContainer")
  const flavoursScrollWidth = flavoursContainer.scrollWidth
  
  window.addEventListener("load", () =&gt; {
    let i = 0
    while (i &lt; flavoursScrollWidth) {
      setTimeout(flavoursContainer.scrollTo(i, 0), 1000)
      console.log(i)
      i++;
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width:300px;
    overflow-x:scroll;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" id="flavoursContainer"&gt;
      This is a really long sentence to demo my code, it's just going on and on. Still going. I should have used some default placeholder text but I've started now so I'll keep going.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>