如何实现Scroller infinite horizontal：新闻列表无限循环滚动功能？

问题分析 #

当前代码的滚动动画在播放到末尾时会出现明显跳转断层，无法实现真正的无限循环——原因是仅对单份列表做位移，当列表完全移出容器后，没有后续内容衔接。

解决方案 #

核心思路是复制一份新闻列表，让两份列表首尾相接，配合调整动画位移距离，实现无缝循环。具体操作如下：

1. 修改HTML结构 #

在原新闻列表后复制一份完全相同的<li>元素，让容器内的内容长度翻倍：

<div class="banner">
  <div class="image">
    <img src="https://img.freepik.com/vector-premium/concepto-noticias-mundiales-ilustracion-globo-vectorial-tema-periodistico-noticias-vivo_570429-18111.jpg">
  </div>
  <div class="notices">
    <ul>
      <li>新闻一</li>
      <li>新闻二</li>
      <li>新闻三</li>
      <li>新闻四</li>
      <li>新闻五</li>
      <!-- 复制列表实现无缝衔接 -->
      <li>新闻一</li>
      <li>新闻二</li>
      <li>新闻三</li>
      <li>新闻四</li>
      <li>新闻五</li>
    </ul>
  </div>
</div>

2. 调整CSS动画参数 #

• 动画目标改为移动到列表总长度的**-50%位置**：两份相同内容的列表，移动一半距离后，第二份列表的起始位置刚好和原列表起始位置重合
• 动画时长翻倍：内容长度加倍，保持滚动速度一致

修改后的CSS：

.banner {
  display: flex;
  align-items: center;
  background-color: #1E90FF;
  padding: 4px 0 4px 4px;
}

.image img {
  max-width: 240px;
  max-height: 120px;
  height: auto;
  margin-right: 20px;
  margin-left: 20px;
}

.notices {
  overflow: hidden;
  background-color: white;
  padding: 10px;
  flex-grow: 1;
}

.notices ul {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  font-size: xx-large;
  /* 时长翻倍，维持原滚动速度 */
  animation: moveNotices 40s linear infinite;
}

.notices ul:hover {
  animation-play-state: paused;
}

.notices ul li {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 4px solid #ccc;
  cursor: pointer;
}

.notices ul li:last-child {
  border-right: none;
}

@keyframes moveNotices {
  0% {
    transform: translateX(100%);
  }
  /* 移动到-50%位置，让第二份列表无缝衔接 */
  100% {
    transform: translateX(-50%);
  }
}

原理说明 #

当动画播放到100%时，第一份列表刚好完全移出容器，此时第二份列表的起始位置正好对齐容器右侧，动画循环后会从这个位置继续滚动，视觉上就实现了无限无缝的滚动效果。

内容的提问来源于stack exchange，提问作者damanchola