当前位置：首页 > JavaScript

js 实现无缝

2026-04-06 10:25:56JavaScript

无缝滚动实现方法

使用CSS动画实现无缝滚动 通过CSS的@keyframes和animation属性可以创建无缝滚动效果。将内容包裹在容器中，设置动画从右向左移动，到达终点时重置位置。

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

使用JavaScript实现动态无缝滚动 通过定时器动态修改元素的transform或left属性，当元素完全移出可视区域时，将其重置到起始位置。

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

function scroll() {
  position -= 1;
  if (position <= -content.offsetWidth) {
    position = 0;
  }
  content.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(scroll);
}
scroll();

克隆节点实现无缝衔接 克隆滚动内容并追加到原内容后面，当原始内容滚动完毕时，立即切换到克隆内容，实现视觉上的无缝衔接。

const container = document.querySelector('.scroll-container');
const content = document.querySelector('.scroll-content');
content.innerHTML += content.innerHTML;
let position = 0;

function scroll() {
  position -= 1;
  if (position <= -content.offsetWidth/2) {
    position = 0;
  }
  content.style.transform = `translateX(${position}px)`;
  requestAnimationFrame(scroll);
}
scroll();

使用Web Animation API 现代浏览器支持的Web Animation API可以创建更流畅的动画效果，同时保持较好的性能。

const content = document.querySelector('.scroll-content');
const animation = content.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(-100%)' }],
  { duration: 10000, iterations: Infinity }
);

注意事项

js 实现无缝