Achieve circular scrolling effect

<template>
  <div class="main">
    <div id="scrollId" class="scoll">
      <div class="father" v-for="(item,index) in Data" :key='index' >
        <div class="body">
          <div class="Title">
            <span class="icon"></span>
            <span class="Text1">{
   
   {item == null ? "--" : item.diseaseName}}</span>
          </div>
          <div class="body_left"></div>
          <div class="body_Right">
            <span class="ap"
              >疾病名称：{
   
   {
                item == null ? "--" : item.diseaseName
              }}</span
            ><br />
            <span class="ap">1.症状：{
   
   { item == null ? "--" :item.harmfulSymptoms }}</span
            ><br />
            <span class="ap">2.防治方法：{
   
   { item == null ? "--" :item.preventionMethods }}</span
            ><br />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { diseaseList } from "@/api/water/disease/disease.js";
export default {
  created() {

  },
  mounted() {
    this.GetInfo();
  },
  data() {
    return {
      Data: {
        scrollTimer: null, // 滚动定时器
        pauseTimer: null, // 暂停定时器
        scrollDirection: "down" // 滚动方向 up向上 down向下
      }
    };
  },
  destroyed() {
    // 清理定时器
    clearTimeout(this.pauseTimer);
    this.pauseTimer = null;
    clearInterval(this.scrollTimer);
    this.scrollTimer = null;
    // 清理点击监听
    window.document.removeEventListener("click", this.pauseScroll);
  },

  methods: {
    // 获取病虫信息
    GetInfo() {
      diseaseList().then(response => {
        this.Data = response.rows;
      }).then(() => {
        this.autoScroll();
      });
    },
    autoScroll() {
      const scrollHeight = document.getElementById("scrollId").scrollHeight;
      const clientHeight = document.getElementById("scrollId").clientHeight;
      const scroll = scrollHeight - clientHeight;
      // 滚动长度为0
      if (scroll === 0) {
        return;
      }
      // 触发滚动方法
      this.scrollFun();
    },
    scrollFun() {
      let that = this;
      // 如果定时器存在
      if (this.scrollTimer) {
        // 则先清除
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
      this.scrollTimer = setInterval(() => {
        const scrollHeight = document.getElementById("scrollId")
          .scrollHeight;
        const clientHeight = document.getElementById("scrollId")
          .clientHeight;
        const scroll = scrollHeight - clientHeight;
        // 获取当前滚动条距离顶部高度
        const scrollTop = document.getElementById("scrollId").scrollTop;
        // 向下滚动

          const temp = scrollTop + 1;
          document.getElementById("scrollId").scrollTop = temp; // 滚动
          // 距离顶部高度  大于等于 滚动长度
          if (scroll <= temp) {
            // 滚动到底部 停止定时器
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
            document.getElementById("scrollId").scrollTop = 0
            // 改变方向
            // 一秒后重开定时器
            setTimeout(() => {
              this.scrollFun();
            }, 1000);
          }
          // 向上滚动
      }, 150);
    }
  }
};
</script>

<style lang="scss" scoped>
.scoll::-webkit-scrollbar {
  width: 5px;
}
::v-deep .scoll::-webkit-scrollbar-button {
  display: none !important;
}
::v-deep .scoll::-webkit-scrollbar-thumb {
  background: #00ffcb;
  border-radius: 10px;
}
.main {
  height: 100%;
  color: white;
  #scrollId {
    height: 100%;
    overflow-y: scroll;
  }
  .father {
    margin-bottom: 2vh;
    .body {
      position: relative;
      .icon {
        display: inline-block;
        width: 1vw;
        height: 2vh;
        border: 1px solid red;
        background: url("../../../assets/image/home/异常报警.png");
        background-size: contain;
      }
      .Title {
        color: rgba(255, 223, 0, 1);
        font-size: 1.2vmin;
        margin-bottom: 2vh;
        .Text1 {
          position: absolute;
          top: 0.3vh;
          margin-left: 1vh;
        }
      }
      .body_left {
        width: 2.6vw;
        height: 4.7vh;
        border-radius: 10%;
        position: absolute;
        background: url("../../../assets/image/七星瓢虫.png");
        background-size: 100% 100%;
      }
      .body_Right {
        position: relative;
        left: 20%;
        width: 80%;
        font-size: 1.2vmin;
        line-height: 1.6vh;
      }
    }
  }

  .ap {
    display: inline-block;
    margin-bottom: 1vh;
  }
}
</style>