Question

我有一个页面可以自动滚动-下面的功能scroll（）正常工作。我需要添加一个悬停功能-应该暂停滚动，让用户可以控制滚动。

我添加了一些代码来停止悬停滚动。

<script> 

var theInterval;

function startScroll() {
    theInterval = setInterval(scroll, 50);
}
function stopScroll() {
    clearInterval(theInterval);
}
$(function () {
    scroll();
    $('#scrollDiv').hover(function () {
        stopScroll();
    }, function () {
        startScroll();
    })
});


function scroll(){ 
    if(document.getElementById('scrollDiv').scrollTop<(document.getElementById('scrollDiv').scrollHeight-document.getElementById('scrollDiv').offsetHeight)){-1
        document.getElementById('scrollDiv').scrollTop=document.getElementById('scrollDiv').scrollTop+1 
        } 
    else {document.getElementById('scrollDiv').scrollTop=0;}
    }
    setInterval(scroll,50)

我希望当用户将鼠标悬停在内容上时，额外的功能将停止滚动。

发生了什么事，只是滚动停止了

Answer 1

您正在从初始调用中删除间隔指针以进行滚动。 setInterval将ID返回给以指定节奏运行该函数的计时器。

您的代码从最后一行的滚动开始，但没有捕获要清除的计时器ID-因此，在第一个悬浮时，您清除theInterval中的空指针，然后在模糊时开始另一个计时器调用滚动。

您可能会注意到它变得更快，因为现在2条逻辑路径每50毫秒增加1像素。

在最后一行，您还需要设置theInterval来跟踪该呼叫，例如：

theInterval = setInterval(scroll, 50)

那应该解决它。

添加鼠标悬停时自动滚动停止工作

1 个答案: