【解决方案】JavaScript 实现DOM、element-ui-table自动滚动

自动轮播

工具类源码

export default {
    /**
     *创建轮播实例
     * @param {Element} target 需要轮播的
     * @param {string} position 滚动方向：x，y
     * @param {number} step 移动步长：1
     * @param {number} interval 定时器间隔时间:50
     * @param {number} timeout 倒计时定时间隔时间：1000
     * @param {number} anotation 动画时长，最小50
     * @param {number} gatter 初始动画前和窗口大小改变时的间隔时间：1000
     * @returns
     */
    create({ target, position, step, interval, timeout, anotation, name, gatter }) {
        return {
            name,
            target,
            position,
            step,
            interval,
            timeout,
            anotation,
            gatter,
            intervalTimer: null,
            timeoutTimer: null,
            start() {
                if (!this.target) {
                    return;
                }

                this.target.style.overflow = "hidden";
                this.step = this.step || 1;
                this.position = this.position || "y";
                this.interval = this.interval || 50;
                this.timeout = this.timeout || 1000;
                this.anotation = this.anotation || 50;
                this.gatter = this.gatter || 1000;

                setTimeout(() => {
                    this.intervalScroll();
                }, this.gatter);
                this.watchWheelEvent();

                window.addEventListener("resize", () => {
                    this.stop();
                    setTimeout(() => {
                        this.intervalScroll();
                    }, this.gatter);
                });
            },
            /**
             * 监听滚轮事件
             */
            watchWheelEvent() {
                this.target.addEventListener(
                    "wheel",
                    (event) => {
                        this.stop();
                        if (this.position === "x") {
                            this.target.scrollLeft = this.target.scrollLeft + event.deltaY;
                        } else {
                            this.target.scrollTop = this.target.scrollTop + event.deltaY;
                        }
                        this.timeoutTimer = setTimeout(() => {
                            this.stop();
                            this.intervalScroll();
                        }, this.timeout);
                    },
                    { passive: false }
                );
            },
            /**
             * 滚动特效
             */
            scrollAnotation() {
                const timer = setInterval(() => {
                    if (this.position === "x") {
                        this.target.scrollLeft += this.step / (this.anotation / 50);
                    } else {
                        this.target.scrollTop += this.step / (this.anotation / 50);
                    }
                }, 50);
                const timer2 = setTimeout(() => {
                    clearInterval(timer);
                    clearTimeout(timer2);
                }, this.anotation);
            },
            /**
             * 重置滚动到起始位置
             */
            resetScrolltoZero() {
                if (!this.timeoutTimer) {
                    this.timeoutTimer = setTimeout(() => {
                        if (this.position === "x") {
                            this.target.scrollLeft = 0;
                        } else {
														this.target.scrollTop = 0;
                        }

                        this.timeoutTimer = clearTimeout(this.timeoutTimer);
                    }, this.timeout);
                }
            },
            /**
             * 设置定时滚动
             * @returns
             */
            intervalScroll() {
                if (this.intervalTimer) {
                    return;
                }
                this.intervalTimer = setInterval(() => {
                    if (
                        this.position === "x" &&
                        this.target.scrollWidth <= this.target.clientWidth
                    ) {
                        return clearInterval(this.intervalTimer);
                    }
                    if (
                        this.position === "y" &&
                        this.target.scrollHeight <= this.target.clientHeight
                    ) {
                        return clearInterval(this.intervalTimer);
                    }

                    if (
                        this.position === "x" &&
                        this.target.clientWidth + this.target.scrollLeft == this.target.scrollWidth
                    ) {
                        this.resetScrolltoZero();
                    } else if (
                        this.position === "y" &&
                        this.target.clientHeight + this.target.scrollTop == this.target.scrollHeight
                    ) {
                        this.resetScrolltoZero();
                    } else {
                        this.scrollAnotation();
                    }
                }, this.interval);
            },
            /**
             * 停止滚动
             */
            stop() {
                this.intervalTimer = clearInterval(this.intervalTimer);
                this.timeoutTimer = clearTimeout(this.timeoutTimer);
            }
        };
    }
};

示例

1. 实例：element-ui table 滚动

import AutoScroll from 'autoscroll';

const table = this.$refs.table,
			wrapper = table.bodyWrapper;

this.autoScrollInstance = AutoScroll.create({ target: wrapper });
this.autoScrollInstance.start();
```