字体滚动效果实现

操作滚动条方法

window.scroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。
window.scrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。
window.scrollTo(x,y)和window.scroll(x,y)一样。

<template>
    <div class="scroll-outside">
      <div class="scroll-inside">123456789123456789123456789</div>
    </div>
</template>

	/**
	* 页面启动执行
	*/
	public mounted(): void {
     
		this.scrollOperation()
	}
    /**
     * 滚动
     */
    public scrollOperation(): void {
     
      const outside: any = document.getElementsByClassName('scroll-outside')[0]
      let x = 0
      setInterval(() => {
     
        if (x === 100) {
     
          x = 0
          outside.scrollBy(-100, 0)  // window.scrollBy(-x,-y)是让滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。
        }
        x += 1
        outside.scrollBy(1, 0)
      }, 20)
    },

// style
  .scroll-outside {
     
    overflow-x: scroll;
    width: 150px;

    .scroll-inside {
     
      width: auto;
    }
  }
 
  div::-webkit-scrollbar {
     
    //display: none //隐藏滚动条
  }