用js实现列表无缝滚动

使用CSS动画实现无缝滚动

通过CSS的@keyframes和transform属性实现循环滚动效果。HTML结构需将列表内容复制一份拼接在后方，滚动到复制内容时重置位置实现无缝效果。

<div class="scroll-container">
  <div class="scroll-content">
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <!-- 复制的内容 -->
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
  </div>
</div>

.scroll-container {
  width: 300px;
  overflow: hidden;
}
.scroll-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll 10s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

使用JavaScript动态计算滚动

通过requestAnimationFrame实现更精确的滚动控制，动态克隆列表元素并计算滚动位置：

function seamlessScroll(container, content, speed = 1) {
  const contentWidth = content.scrollWidth;
  container.appendChild(content.cloneNode(true));

  let position = 0;
  function animate() {
    position -= speed;
    if (position <= -contentWidth) {
      position = 0;
    }
    content.style.transform = `translateX(${position}px)`;
    requestAnimationFrame(animate);
  }
  animate();
}

// 使用示例
const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
seamlessScroll(container, content, 2);

处理动态内容更新

当列表内容可能变化时，需要重新计算宽度并重置动画：

function updateSeamlessScroll() {
  const newContent = content.cloneNode(true);
  container.innerHTML = '';
  container.appendChild(newContent);
  container.appendChild(newContent.cloneNode(true));
  seamlessScroll(container, newContent);
}

// 内容更新时调用
updateSeamlessScroll();

响应式布局适配

通过监听窗口大小变化调整滚动速度：

window.addEventListener('resize', () => {
  const containerWidth = container.offsetWidth;
  const speed = Math.max(1, containerWidth / 200);
  updateSeamlessScroll(speed);
});

性能优化建议

使用will-change: transform提升CSS动画性能：

.scroll-content {
  will-change: transform;
}

对于大量列表项，考虑虚拟滚动技术，只渲染可视区域内的元素。通过Intersection Observer API实现动态加载：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 加载新内容
    }
  });
});
observer.observe(content.lastElementChild);