滚动定时器，鼠标滑入暂停滚动，滑出继续滚动

原创已于 2023-04-10 19:38:59 修改 · 870 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#滚动条自动滚动 #滚动条定时器 #滚动动画 #javascript #jquery

于 2021-05-27 14:12:14 首次发布

web前端专栏收录该内容

27 篇文章

订阅专栏

这段代码展示了如何在JavaScript中定义滑入滑出事件，用于控制DOM元素的滚动。当鼠标进入`.bigDivBottom.listUl`元素时，清除定时器；离开时，设置定时器每4秒调用`scrolllist`函数，实现内容的自动滚动。在Vue组件的`beforeDestroy`生命周期钩子中，记得清除定时器以避免内存泄漏。`scrolllist`函数则负责滚动到下一个卡片位置。

定义滑入滑出事件

let $listUl = $('.bigDivBottom .listUl') // 设置overflow-y的dom
$listUl.hover(function(){
    clearInterval(that.leftTopTimer)
},
function () {
     that.leftTopTimer = setInterval(() => {
        that.scrolllist()
     }, 4000)
}).trigger('mouseleave')

Vue销毁时别忘了销毁定时事件

beforeDestroy () {
     clearInterval(this.leftTopTimer)
     this.leftTopTimer = null
 },

滚动事件

scrolllist () {
    var scrollHeight = $('.listLi:first').height() + 20;
    let $listUl = $('.bigDivBottom .listUl') // 设置overflow-y的dom
    $listUl.stop(true).animate({scrollTop:scrollHeight + $listUl.scrollTop()}, "slow"); // 一次滚动一个卡片+20的高度
}