vue2实现列表内容自动滚动

列表内容自动滚动,到底部以后反方向向上滚动,依次循环

<template>
  <div
    :id="scrollId"
    style="
      border: 1px solid red;
      height: 300px;
      width: 200px;
      overflow-y: scroll;
      position: absolute;
      text-align: center;
      top: 10%;
      left: 40%;
    "
  >
    <div>
      <div v-for="(item, index) in 20">这是列表{{ index + 1 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollTimer: null, // 滚动定时器
      pauseTimer: null, // 暂停定时器
      scrollId: "scrollId", // 滚动容器id
      scrollDirection: "down", // 滚动方向 up向上 down向下
    };
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.pauseTimer);
    this.pauseTimer = null;
    clearInterval(this.scrollTimer);
    this.scrollTimer = null;
    // 清理点击监听
    window.document.removeEventListener("click", this.pauseScroll);
  },
  mounted() {
    this.dataCompleteFun();
  },
  methods: {
    // 数据加载完成方法
    dataCompleteFun() {
      // 开启滚动
      this.autoScroll();
    },
    autoScroll() {
      const scrollHeight = document.getElementById(this.scrollId).scrollHeight;
      const clientHeight = document.getElementById(this.scrollId).clientHeight;
      const scroll = scrollHeight - clientHeight;
      // 滚动长度为0
      if (scroll === 0) {
        return;
      }
      // 触发滚动方法
      this.scrollFun();
      // 去除点击监听
      window.document.removeEventListener("click", this.pauseScroll);
      // 重设点击监听
      window.document.addEventListener("click", this.pauseScroll, false);
    },
    pauseScroll() {
      // 定时器不为空
      if (this.scrollTimer) {
        // 清除定时器
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
        // 一秒钟后重新开始定时器
        this.pauseTimer = setTimeout(() => {
          this.scrollFun();
        }, 2000);
      }
    },
    scrollFun() {
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
      this.scrollTimer = setInterval(() => {
        const scrollHeight = document.getElementById(
          this.scrollId
        ).scrollHeight;
        const clientHeight = document.getElementById(
          this.scrollId
        ).clientHeight;
        const scroll = scrollHeight - clientHeight;
        // 获取当前滚动条距离顶部高度
        const scrollTop = document.getElementById(this.scrollId).scrollTop;
        // 向下滚动
        if (this.scrollDirection === "down") {
          const temp = scrollTop + 5;
          document.getElementById(this.scrollId).scrollTop = temp; // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
            // 改变方向
            this.scrollDirection = "up";
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun();
            }, 1000);
          }
          // 向上滚动
        } else if (this.scrollDirection === "up") {
          const temp = scrollTop - 5;
          document.getElementById(this.scrollId).scrollTop = temp; // 滚动
          // 距离顶部高度  小于等于 0
          if (temp <= 0) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
            // 改变方向
            this.scrollDirection = "down";
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun();
            }, 1000);
          }
        }
      }, 150);
    },
  },
};
</script>