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

Z时代
2024-01-10
分类：技术分享

最近项目（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>
<divclass="about">
<divclass="message-list"ref="messageListRef":style="{top:`${topValue}px`}">
<divclass="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>