js实现无缝滚动代码

实现无缝滚动的JavaScript代码

无缝滚动通常用于轮播图或新闻列表等场景，通过循环滚动内容实现无限播放效果。以下是两种常见的实现方式：

使用CSS动画结合JavaScript控制

// HTML结构示例
// <div class="scroll-container">
//   <div class="scroll-content">需要滚动的内容</div>
// </div>

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');

// 克隆内容实现无缝衔接
content.innerHTML += content.innerHTML;

let scrollPos = 0;
function autoScroll() {
  scrollPos += 1;
  if(scrollPos >= content.scrollWidth / 2) {
    scrollPos = 0;
  }
  container.scrollLeft = scrollPos;
  requestAnimationFrame(autoScroll);
}
autoScroll();

使用transform实现性能更优的无缝滚动

const slider = document.querySelector('.slider');
const slides = document.querySelector('.slides');
const slideItems = document.querySelectorAll('.slide-item');

// 克隆第一组元素
slides.innerHTML += slides.innerHTML;

let currentPosition = 0;
const slideWidth = slideItems[0].offsetWidth;
const totalSlides = slideItems.length;

function animate() {
  currentPosition -= 1;
  if(Math.abs(currentPosition) >= slideWidth * totalSlides / 2) {
    currentPosition = 0;
  }
  slides.style.transform = `translateX(${currentPosition}px)`;
  requestAnimationFrame(animate);
}
animate();

关键实现要点

1. 内容需要克隆一份追加到原有内容后面，当滚动到克隆部分时立即重置位置
2. 使用requestAnimationFrame实现平滑动画，比setInterval性能更好
3. 计算元素宽度时要考虑边框和padding的影响
4. 对于水平滚动使用scrollLeft或transform: translateX
5. 对于垂直滚动使用scrollTop或transform: translateY

响应式注意事项

窗口大小改变时需要重新计算元素尺寸：

window.addEventListener('resize', () => {
  slideWidth = slideItems[0].offsetWidth;
});

暂停和继续控制

可以通过标志位控制动画暂停：

let isPaused = false;
function toggleScroll() {
  isPaused = !isPaused;
  if(!isPaused) {
    animate();
  }
}