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

最近项目（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！