javascript - 如何在鼠标悬停时停止滚动 ？

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 我想在鼠标悬停时停止滚动，所以我将这段代码添加到 div 中:

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

Here is a link to a jfiddle.那里的预览没有做它应该做的，但这就是我现在在我的元素中工作的东西。

到目前为止这是可行的，但问题是当我将鼠标悬停在该 div 上时，我希望能够手动滚动。现在，自动滚动正在停止，但我无法仅使用滚轮手动滚动:滚动时的 react 与使用 onmouseover 停止时的 react 相同。

有没有一种方法可以基本上取消鼠标悬停时的整个滚动功能，或者写一些只允许使用滚轮/滚动条的东西。还有吗？也可以让代码始终允许使用滚轮/滚动条。

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

谢谢!!

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()">