向左无缝滚动文字

<template>
  <div id="app">
      <!-- <h1>向右的无缝滚动</h1> -->
      <div class="outer-box">
        <div class="inner-box1">
          <div>你好啊！张三1</div>
          <div>你好啊！张三2</div>
          <div>你好啊！张三3</div>
          <div>你好啊！张三4</div>
          <div>你好啊！张三5</div>
        </div>
        <div class="inner-box2">
          <div>你好啊！张三1</div>
          <div>你好啊！张三2</div>
          <div>你好啊！张三3</div>
          <div>你好啊！张三4</div>
          <div>你好啊！张三5</div>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'app',
  mounted(){
    let outerBox = document.getElementsByClassName("outer-box")[0] //父标签
    let innerBox1 = document.getElementsByClassName("inner-box1")[0] 
    setInterval(()=>{
      this.scrollFunc(outerBox,innerBox1)
    },24)
  },
  methods: {
      scrollFunc(outerBox,innerBox){
        if(outerBox.scrollLeft>=innerBox.offsetWidth){
            outerBox.scrollLeft=0
          }else {
            outerBox.scrollLeft++
          }
      }
  },
}
</script>
 
<style>
 .app{
   width: 100%;
   height: 100%;
 }
  h1{
    text-align: center;
  }
  .outer-box{
    text-align: center;
    width: 100%;
    margin: 0 auto;
    height: 40px;
    background-color: yellow;
    overflow: hidden; /* 这个属性很重要一定要设置*/
    display: flex;
    flex-flow: row nowrap;
  }
  .inner-box1,.inner-box2{
    display: flex;
    flex-flow: row nowrap;
    white-space: nowrap;
  }
 
  .inner-box1 div,.inner-box2 div{
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    margin-right: 10px;
  }
</style>