animation实现无缝滚动动画会空白

平凡的帆
  • 2
新手上路,请多包涵

js↓

    const scrollList = document.getElementById('swiper');
    const label = scrollList.getElementsByClassName('item');
    if (label.length > 3) {
        scrollList.innerHTML = scrollList.innerHTML + scrollList.innerHTML;
        scrollList.style.animation = 'marquee ' + (label.length * 1.5) + 's linear infinite';
    }

css↓
image.png

通过animation动态的实现无缝滚动,当滚动的条数较小时(大概40条左右),可以正常滚动。但当滚动的条数较大时,动画前几秒会空白。条数越多,空白的时间越长,这是为什么???

回复
阅读 563
1 个回答

受影响的元素越多当然性能就不行了,要是这么容易就能解决,那写各种滚动解决方案的人岂不是智商有问题了...

这种滚动目前的主要思路还是使用虚拟滚动条(用于表达当前内容和总加载条数之间的位置和比例关系),动画部分就是简单的利用scrollTop,因为这样不会改变dom结构,所以没有性能问题。滚动完成后再把多余的内容清理。

应该有虚拟滚动条的插件吧,你搜搜看。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ,欢迎正在阅读的你也加入。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏