当前位置：首页 > JavaScript

用js实现列表无缝滚动

2026-04-04 21:53:04JavaScript

实现无缝滚动的基本原理

无缝滚动的核心是通过动态调整列表项的位置，当元素滚动到可视区域外时，将其移动到列表末尾，形成循环滚动的效果。需要监听滚动事件并计算元素位置。

HTML结构准备

创建一个固定高度的容器，内部放置需要滚动的列表。列表项数量应足够多以确保滚动流畅。

<div class="scroll-container" id="scroller">
  <ul class="scroll-list" id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- 更多列表项 -->
  </ul>
</div>

CSS样式设置

为容器设置固定高度和溢出隐藏，列表项设置为行内显示以便横向滚动。

.scroll-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}

.scroll-list {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scroll-list li {
  display: inline-block;
  padding: 10px 20px;
  background: #f0f0f0;
  margin-right: 10px;
}

JavaScript实现逻辑

通过定时器或requestAnimationFrame实现自动滚动，动态调整列表位置实现无缝效果。

const scroller = document.getElementById('scroller');
const list = document.getElementById('list');
let position = 0;

function animate() {
  position -= 1;
  if (position <= -list.children[0].offsetWidth) {
    position = 0;
    list.appendChild(list.children[0]);
  }
  list.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(animate);
}

animate();

性能优化方案

使用CSS transform代替left/top定位减少重排，使用requestAnimationFrame优化动画流畅度。克隆列表项避免滚动时出现空白。

// 克隆列表项填充容器
const items = list.innerHTML;
list.innerHTML = items + items;

function optimizedAnimate() {
  position -= 1;
  if (position <= -list.scrollWidth/2) {
    position = 0;
  }
  list.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(optimizedAnimate);
}

响应式处理

监听窗口大小变化，动态调整滚动速度或列表项布局。

let speed = 1;
window.addEventListener('resize', () => {
  speed = window.innerWidth < 768 ? 0.5 : 1;
});

暂停与继续控制

添加鼠标事件实现悬停暂停功能，提升用户体验。

用js实现列表无缝滚动

let isPaused = false;
scroller.addEventListener('mouseenter', () => isPaused = true);
scroller.addEventListener('mouseleave', () => isPaused = false);

function controlledAnimate() {
  if (!isPaused) {
    position -= speed;
    if (position <= -list.scrollWidth/2) position = 0;
    list.style.transform = `translateX(${position}px)`;
  }
  requestAnimationFrame(controlledAnimate);
}