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

微行

已于 2023-04-10 19:38:59 修改

阅读量773

点赞数

分类专栏： web前端文章标签：滚动条自动滚动滚动条定时器滚动动画 javascript jquery

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

本文链接：https://blog.csdn.net/itlsq/article/details/117327286

版权

web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

定义滑入滑出事件

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的高度
}