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

Question

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↓

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

Answer 1

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

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

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

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