I currently have a div that is set to scroll infinitely using JavaScript:
<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>
However, I want this automatic scrolling to stop when someone hovers over the div. To achieve this, I added the following code to the div:
<div id="content" value="Pause" onmouseover="clearTimeout(t1)" onmouseout="scroll()">
You can check out a JSFiddle here, although the preview may not work as expected.
While this setup works, my issue now is that I can't manually scroll using the scrollwheel or scrollbar when hovering over the div. The behavior remains the same whether it's automatically scrolling or paused due to mouseover.
Is there a way to completely disable the automatic scrolling function on mouseover, or perhaps enable manual scrolling in addition to the current setup? Any suggestions would be greatly appreciated!
Thank you for your help!