前端 - 如何在vue中实现一个定时自动间隔多少秒滚动的滚动条？

Question

如何在vue中实现一个定时自动间隔多少秒滚动的滚动条？

mounted () {    this.getTableScroll()  },  destroyed () {    this.getTableScroll()  },  methods: {    getTableScroll () {      if (!this.intervalID) {        this.intervalID = setInterval(this.autoScroll, 2000)      }    },    autoScroll () {      const dom = this.$refs.scrollTable      dom.scrollTop = dom.scrollHeight    }

这么写能一下子滚动，不能间隔滚动，怎么优化实现呢？？

参考楼里大佬答案，但是不实现已打开页面就自动间隔滚动，反而是要手动滚动并一下子回到顶部，这是哪里有问题（350是容器的固定高度）

data () {    return {      activeCls: 'red',      labelCls: 'label',      valueCls: 'value',      // 定时器标识符      intervalID: null,      scrollStep: 30,      currentScrollTop: 0      // table_col: 'table_col'    }  },  mounted () {    this.getTableScroll()  },  destroyed () {    this.clearScrollInterval()  },  methods: {    getTableScroll () {      if (!this.intervalID) {        this.intervalID = setInterval(this.autoScroll, 2000)      }    },    clearScrollInterval () {      if (this.intervalID) {        clearInterval(this.intervalID)        this.intervalID = null      }    },    autoScroll () {      const dom = this.$refs.scrollTable      this.currentScrollTop += this.scrollStep      if (this.currentScrollTop >= dom.scrollHeight - 350) {        this.currentScrollTop = dom.scrollHeight - 350      }      dom.scrollTop = dom.currentScrollTop    }  }

Answer 1

data () {  return {    activeCls: 'red',    labelCls: 'label',    valueCls: 'value',    // 定时器标识符    intervalID: null,    scrollStep: 30,    currentScrollTop: 0    // table_col: 'table_col'  }},mounted () {  this.getTableScroll()},beforeDestroy () {  this.clearScrollInterval()},methods: {  getTableScroll () {    if (!this.intervalID) {      this.intervalID = setInterval(this.autoScroll, 2000)    }  },  clearScrollInterval () {    if (this.intervalID) {      clearInterval(this.intervalID)      this.intervalID = null    }  },  autoScroll () {    const dom = this.$refs.scrollTable    this.currentScrollTop += this.scrollStep    if (this.currentScrollTop >= dom.scrollHeight - 350) {      this.currentScrollTop = 0 // 重置为0，重新开始滚动    }    dom.scrollTop = this.currentScrollTop  }}