html + js + css 数据可视化大屏项目中，有个地方需要滚动展示，之前一直用vue插件实现的，现在需要js加css实现，将实现过程记录一下。

效果截图

动态效果

为了实现列表的上下循环滚动，可以使用JavaScript来调整列表的内容。当一个项目完全滚动出视图时，可以把它从列表的前面移到列表的后面，反之亦然。这样可以产生一个无限滚动的效果。

以下是一个简单的实现：

1. HTML:

<div class="list" id="listContainer">
    <div class="listItem">
        <span>这里是商户名称这里是商户名称这里是商户名称</span>
    </div>
    <div class="listItem">
        <span>这里是商户名称这里是商户名称这里是商户名称</span>
    </div>
    <!-- 可以添加更多的 .listItem 这里 -->
</div>

2. CSS (样式添加滚动速度和视觉效果):

.list {
    height: 50px;  /* 设置容器的高度，只显示一个item */
    overflow: hidden;  /* 隐藏超出的部分 */
    position: relative;
}

.listItem {
    position: relative;
    animation: scroll 5s linear infinite;  /* 设置动画 */
}

@keyframes scroll {
    0% { transform: translateY(0); }
    50% { transform: translateY(-100%); }
    100% { transform: translateY(-200%); }
}

3. JavaScript (实现循环滚动):

const listContainer = document.getElementById('listContainer');

// 监听动画迭代事件，当一个项目完成动画时进行处理
listContainer.addEventListener('animationiteration', () => {
    const firstChild = listContainer.firstElementChild;
    listContainer.appendChild(firstChild);  // 把第一个元素移动到最后，实现无限滚动效果
});

这个示例假设列表中只有两个项目，并设置了一个动画来循环滚动它们。当每个项目完成其动画时，它会被移动到列表的末尾，从而实现循环滚动的效果。

根据需要，你可以调整CSS的动画时间、添加更多的项目，或根据项目的数量动态地设置动画的关键帧。