前端利用JS实现自定义表格滚动效果

原创

已于 2024-06-24 15:25:55 修改 · 置顶 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-06-24 15:18:02 首次发布

在数据可视化大屏中会有滚动表格的需求，不使用插件自己封装重复使用！！！！

好久不见！话不多说，直接上代码！！！！！！！！！！

一、利用scrollTop、定时器实现滚动效果

scrollTop为元素滚动条滚动距离

roll(t) {
            var box1 = document.getElementById("box1");
            var box2 = document.getElementById("box2");
            var table = document.getElementById("table");
            table.scrollTop = 0; // 开始无滚动时设为0 滚动距离
            // 当内容小于父元素不实现滚动
            if (box1.scrollHeight >= table.scrollHeight) {
                box2.innerHTML = box1.innerHTML;
            }
            this.timer = setInterval(this.rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
            // 鼠标移入div时暂停滚动
            table.onmouseover = () => {
                clearInterval(this.timer);
            }
            // 鼠标移出div后继续滚动
            table.onmouseout = () => {
                this.timer = setInterval(this.rollStart, t);
            }
        },
        r