利用JS实现滚动条自动滚动（scrollTop）

最新推荐文章于 2024-07-17 19:25:52 发布

不爱吃鱼的L猫

最新推荐文章于 2024-07-17 19:25:52 发布

阅读量5.5k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_24698097/article/details/111476289

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

主要是获取到有滚动效果的元素，然后通过改变scrollTop的值来实现自动滚动效果。interval是setInterval函数的参数，如果想停止滚动可以利用鼠标的mouseOver函数，然后利用clearInterval函数将定时器清除就可以。

问题：当浏览器缩放之后就无法自动播放了，但在火狐浏览器可以播放，谷歌，360，IE等则不能播放，不知道什么原因

function autoScroll(dom, interval) {
    var parentDom = document.querySelector(dom) //获取滚动元素

    initInterval = setInterval(() => {
        //判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (parentDom.scrollTop + parentDom.clientHeight === parentDom.scrollHeight) {
            parentDom.scrollTop = 0
        } else {
            parentDom.scrollTop++ // 元素自增距离顶部
        }
    }, interval)
}