How can I stop Scrolling my <div> onmouseover?

Question

Right now I have a div that I am automatically scrolling infinitely:

<script language="javascript">
    i = 0
    var speed = 1
    function scroll() {
        i = i + speed
        var div = document.getElementById("content")
        div.scrollTop = i
        if (i > div.scrollHeight - 160) { i = 0 }
        t1 = setTimeout("scroll()", 100)
        }
</script>

The div that I need to scroll I want to stop scrolling onmouseover, so I have added this code to the div:

<div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">

Here is a link to a jfiddle. The preview there isn't doing what it should, but that's what I have that's working in my project right now.

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.

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.

I'm not sure what would be the best way to do it.

Thanks!!

Answer 1

By setting it to scroll the overflow, assuming a fixed height, the scrollbar will pop up and you can scroll manually. Of course you will want to hide the scrollbar again when it resumes autoscrolling so you will need two functions to set the style.

<script language="javascript">
    i = 0;
    var speed = 1,t1=null;
    function startScroll(){
        document.getElementById("content").style.overflowY="hidden";
        scroll();
    }
    function stopScroll(){
        clearTimeout(t1);
        document.getElementById("content").style.overflowY="scroll";
    }
    function scroll() {
        i = i + speed;
        var div = document.getElementById("content");
        div.scrollTop = i;
        if (i > div.scrollHeight - 160) { i = 0; }
        t1 = setTimeout("scroll()", 100);
    }
</script>

HTML change:

<div id="content" value="Pause" onmouseover="pauseScroll()" onmouseout="startScroll()">