jili2-screen/src/apps/home/components/Scroll.vue

<template>
    <div :style="{ width: width + 'px', height: height + 'px' }" class="container">
        <slot/>
    </div>
</template>
<script>
export default {
    props: {
        width: {
            type: Number,
            required: true
        },
        height: {
            type: Number,
            required: true
        },
        duration: {
            type: Number,
            required: true
        },
        span:{
            type: Number,
            required: true
        }
    },
    data() {
        return {
            timer: null,
            el: null,
            x: 0,
            y: 0,
            scrollHeight: 0
        }
    },
    mounted() {
        this.el = document.querySelector(".container")
        if (!this.el) return;
        this.scrollHeight = this.el.scrollHeight + 17
        this.timer = setInterval(() => {
            this.updatePos()
            // console.log(this.x, this.y);
            this.el.scrollTo(this.x, this.y)
        }, this.duration)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    methods: {
        updatePos() {
            this.y += this.span
            if(this.y > this.scrollHeight)
            this.y = 0

        }
    }
}
</script>
<style lang="scss" scoped>
/* 隐藏垂直滚动条 */
.container::-webkit-scrollbar {
width: 0;
}
/* 隐藏水平滚动条 */
.container::-webkit-scrollbar {
height: 0;
}
.container {
    overflow-y: auto;
    scroll-behavior: smooth;
}
</style>