title: How can I stop Scrolling my <div> onmouseover?
body: <p>Right now I have a div that I am automatically scrolling infinitely:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
      i = 0
      var speed = 1
      function scroll() {
          i = i + speed
          var div = document.getElementById("content")
          div.scrollTop = i
          if (i &gt; div.scrollHeight - 160) { i = 0 }
          t1 = setTimeout("scroll()", 100)
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>The div that I need to scroll I want to stop scrolling onmouseover, so I have added this code to the div:</p>
  
  <pre><code>&lt;div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()"&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/r4FD8/2/" rel="nofollow">Here is a link to a jfiddle.</a> The preview there isn't doing what it should, but that's what I have that's working in my project right now. </p>
  
  <p>So far this is working, but the problem is that I want to be able to manually scroll when I hover over this div. Now, the automatic scrolling is stopping, but I can't manually scroll with just the scrollwheel: It reacts the same when it is scrolling as when it is stopped with onmouseover.</p>
  
  <p>Is there a way that I can basically cancel the whole scroll function onmouseover, or write something that just allows using the scrollwheel/scrollbar.  as well? It would also be ok to have code to ALWAYS allow using the scrollwheel/scrollbar. </p>
  
  <p>I'm not sure what would be the best way to do it.</p>
  
  <p>Thanks!!</p>