A solution to the text jitter of rolling bulletin

Recent project (VUE) in the request to do a function in the system access record scrolling display, the general idea is: the child element use position: Absolute layout, with JS use setInterval dynamic control of the change of top value, is the child element to scroll, probably the code is like this:

setInterval((a)= > {
    this.topValue--;
    / / the height of the child element enclosing $refs. MessageListRef. OffsetHeight
    if(this.topValue<=-this.$refs.messageListRef.offsetHeight){
        this.topValue=0; }},50);	Copy the code

However, after delivery, text jitter appeared on some PCS, so some changes to the program were needed.

Before researching the skeleton screen source code, I found an API: Window. RequestAnimationFrame (), the feeling is to be able to do the article, the window. The requestAnimationFrame () method tells the browser you want to perform animations, and request the browser calls the specified function to update until the next redraw animation. This method takes the callback as an argument to call before redrawing.

Note: If you want to animate another frame on the next redraw, the callback routine must call requestAnimationFrame() itself.

This method should be called whenever you are ready to update the animation on the screen. This will request that your animation function be called before the browser performs the next redraw. The number of callbacks is typically 60 per second, but according to W3C recommendations, will usually match the display refresh rate in most Web browsers.

The modified code is as follows:

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>Copy the code

Js:

<script>
export default {
  data() {return {
      messageList:[
        {
          label:'This is a dynamic scrolling bulletin 1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 2',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 3',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 1',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 4',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 5',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 6',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 7',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 8',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 9',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 10',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamically rolling bulletin 11',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
        {
          label:'This is a dynamic scrolling bulletin 12',
          value:'https://www.baidu.com',
          date:'2020-01-01'
        },
      ],
      topValue:0,
      scorllFlag:true,}},mounted() {
    window.requestAnimationFrame(this.beginScroll)
  },
  beforeDestroy() {clearTimeout(this.t)}, methods: {// Start the scrolling execution methodbeginScroll() {if(this scorllFlag) {enclosing topValue = this. TopValue - 0.5;if(this.topValue<=-this.$refs.messageListRef.offsetHeight){ this.topValue=0; } window. RequestAnimationFrame (enclosing beginScroll)}}, / / mouse hover stop rollingmessageItemMouseover(){
      this.scorllFlag = false; }, // Continue scrolling when the mouse leavesmessageItemMouseout(){ clearTimeout(this.t); This.t =setTimeout(()=>{
        this.scorllFlag = true;
        window.requestAnimationFrame(this.beginScroll)
      },200)
    },
    goLink(url){
      window.open(url)
    }
  },
}
</script>Copy the code

The GIF capture tool is a bit clunky, it looks like it has a jitter effect, but it doesn’t

The TIME!