滾動公告文字抖動的一種解決思路

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