export default { data() { return { scrollDom: null, interval: null, scrollTimer: null, // 滚动定时器 pauseTimer: null, // 暂停定时器 timeout: null, step: null } }, created() { }, mounted() { // this.dataCompleteFun() }, destroyed() { // 清理定时器 clearTimeout(this.pauseTimer) this.pauseTimer = null clearInterval(this.scrollTimer) this.scrollTimer = null // 清理点击监听 window.document.removeEventListener('click', this.pauseScroll) }, methods: { autoScroll() { // 滚动长度为0 if (this.scrollDom.scrollHeight - this.scrollDom.clientHeight > 0) { // 如果定时器存在 if (this.scrollTimer) { // 则先清除 clearInterval(this.scrollTimer) clearTimeout(this.pauseTimer) this.scrollTimer = null this.pauseTimer = null } this.scrollTimer = setInterval(() => { const scrollHeight = this.scrollDom.scrollHeight const clientHeight = this.scrollDom.clientHeight const scroll = scrollHeight - clientHeight // 获取当前滚动条距离顶部高度 const scrollTop = this.scrollDom.scrollTop // 当滚动到底部时,间隔时间后重回顶部开始 if (scrollTop + this.step >= scroll) { this.scrollDom.scrollTop = scroll this.pauseTimer = setTimeout(() => { this.scrollDom.scrollTop = 0 this.autoScroll() }, this.timeout) } else { // 没有则继续滚动 this.scrollDom.scrollTop = scrollTop + this.step } // console.log(scrollHeight, clientHeight, scroll, scrollTop) }, this.interval) } else { return } } } }