localization-inquiry-machine/src/common/scrollMixins.js

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
      }
    }
  }
}