滚动公告文字抖动的一种解决思路

最近项目（vue）里要求做系统中某个功能访问记录的滚动展示，大体思路是：子元素使用position: absolute布局，配合js使用setinterval进行动态控制top值的变化，是子元素进行滚动，大概代码是这样的：

setInterval(() => {
    this.topValue--;
    //子元素的高度this.$refs.messageListRef.offsetHeight
    if(this.topValue<=-this.$refs.messageListRef.offsetHeight){
        this.topValue=0;
    }
}, 50);	

可是在交付之后在某些PC上出现文字抖动的现象，所以需要对程序进行一些修改。

之前在研究骨架屏的源码是发现一个API：window.requestAnimationFrame() ，感觉是能做点文章的，该window.requestAnimationFrame()方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数以在下次重绘之前更新动画。该方法将回调作为在重绘之前调用的参数。

注意：如果要在下次重绘时为另一帧设置动画，则回调例程必须自己调用requestAnimationFrame()。

只要您准备好在屏幕上更新动画，就应该调用此方法。这将请求在浏览器执行下一次重绘之前调用您的动画函数。回调次数通常为每秒60次，但根据W3C建议，通常会与大多数Web浏览器中的显示刷新率相匹配。

修改之后的代码如下：

html：

<template>
  <div class="about">
    <div class="message-list" ref="messageListRef" :style="{top:`${topValue}px`}">
      <div class="message-item" @click='goLink(item.value)' @mouseover="messageItemMouseover" @mouseout="messageItemMouseout" v-for="(item,index) in messageList" :key='index+item.label'>
        <span>{{item.label}}</span>
        <span>{{item.date}}</span>
      </div>
    </div>
  </div>
</template>

js：

<script>
export default {
  data(){
    return {
      messageList:[
        {
          label:'这是一个动态滚动的公告1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告2',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告3',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告4',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告5',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告6',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告7',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告8',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告9',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告10',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告11',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'这是一个动态滚动的公告12',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
      ],
      topValue:0,
      scorllFlag:true,
    }
  },
  mounted() {
    window.requestAnimationFrame(this.beginScroll)
  },
  beforeDestroy() {
    clearTimeout(this.t)
  },
  methods: {
    //开始滚动执行的方法
    beginScroll(){
      if(this.scorllFlag){
        this.topValue=this.topValue-0.5;
        if(this.topValue<=-this.$refs.messageListRef.offsetHeight){
          this.topValue=0;
        }
        window.requestAnimationFrame(this.beginScroll)
      }
    },
    //鼠标悬停停止滚动
    messageItemMouseover(){
      this.scorllFlag = false;
    },
    //鼠标离开继续滚动
    messageItemMouseout(){
      clearTimeout(this.t);//防抖处理
      this.t = setTimeout(()=>{
        this.scorllFlag = true;
        window.requestAnimationFrame(this.beginScroll)
      },200)
    },
    goLink(url){
      window.open(url)
    }
  },
}
</script>

截取gif的工具稍微有点垃圾，看起来会有抖动效果，实则是没有的

TIME！