简单的无缝滚动

<template>
  <div>
    <div id="box">
      <ul id="list1" ref="list1">
        <li>星期一</li>
        <li>星期二</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
      </ul>
      <ul id="list2" ref="list2"></ul>
    </div>  
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted () {
      this.moveFun()
    },
    methods: {
      moveFun() {
        let box = document.getElementById("box")
        let list1 = document.getElementById("list1")
        let list2 = document.getElementById("list2")

        list2.innerHTML = list1.innerHTML;

        function scrollUp() {
          if(box.scrollTop >= list1.offsetHeight) {
            box.scrollTop = 0;
          } else {
            box.scrollTop++;
          }
        }

        let scrollMove = setInterval(scrollUp, 300)

        //鼠标经过时，滚动停止
          box.onmouseover=function(){
              clearInterval(scrollMove)
              console.log('over')
          }
          box.touchstart=function(){
              clearInterval(scrollMove)
              console.log('touch start')
          }

          //鼠标离开时，滚动继续
          box.onmouseout=function(){
              scrollMove=setInterval(scrollUp,300);
          }
          box.touchend=function(){
              scrollMove=setInterval(scrollUp,300);
          }
      }
    }
  }
</script>

<style lang="scss" scoped>
ul,li{list-style: none;}
#box{ width: 200px; height:90px; overflow:hidden; border:1px solid red;}
</style>