Question

现在我有一个div，我会无限地自动滚动：

<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>

我需要滚动的div我想停止滚动onmouseover，所以我已将此代码添加到div：

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

Here is a link to a jfiddle.预览没有做它应该做的事情，但这就是我现在在我的项目中所做的工作。

到目前为止，这是有效的，但问题是我希望能够在我将鼠标悬停在此div上时手动滚动。现在，自动滚动正在停止，但是我不能仅使用滚轮手动滚动：它在滚动时反应相同，就像在onmouseover停止时一样。

有没有办法可以基本上取消整个滚动功能onmouseover，或者写一些只允许使用滚轮/滚动条。还有？让代码始终允许使用滚轮/滚动条也是可以的。

我不确定最好的方法是什么。

谢谢！

Answer 1

通过将其设置为滚动溢出，假设高度固定，滚动条将弹出，您可以手动滚动。当然，当你恢复自动滚动时，你会想要再次隐藏滚动条，所以你需要两个函数来设置样式。

<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更改：

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

如何停止滚动我的<div> onmouseover？</div>

1 个答案: