当前位置：首页 > JavaScript

js实现卷轴

2026-04-05 15:25:03JavaScript

实现卷轴效果的 JavaScript 方法

使用 CSS 和 JavaScript 结合实现卷轴效果，可以通过动画或滚动事件触发。以下是两种常见实现方式：

基于 CSS 动画的卷轴效果

const scrollElement = document.getElementById('scroll-container');
scrollElement.style.animation = 'scroll 10s linear infinite';

// CSS 部分需定义动画关键帧
/*
@keyframes scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}
*/

基于滚动事件的动态卷轴

js实现卷轴

window.addEventListener('scroll', function() {
  const scrollPosition = window.pageYOffset;
  const scrollContent = document.querySelector('.scroll-content');
  scrollContent.style.transform = `translateY(${-scrollPosition * 0.5}px)`;
});

实现无限循环卷轴

对于新闻播报类的无限滚动效果，可采用克隆内容的方式：

function setupInfiniteScroll() {
  const container = document.querySelector('.scroller');
  const content = document.querySelector('.scroll-content');
  const clone = content.cloneNode(true);
  container.appendChild(clone);

  let pos = 0;
  setInterval(() => {
    pos -= 1;
    if (pos <= -content.offsetHeight) {
      pos = 0;
    }
    container.style.transform = `translateY(${pos}px)`;
  }, 30);
}

横向卷轴实现

对于水平滚动效果，调整 transform 的 X 轴参数：

js实现卷轴

const horizontalScroll = (speed) => {
  const elements = document.querySelectorAll('.horizontal-scroll');
  elements.forEach(el => {
    let x = 0;
    setInterval(() => {
      x -= speed;
      el.style.transform = `translateX(${x}px)`;
    }, 16);
  });
};

性能优化建议

使用 will-change 属性提升动画性能：

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

优先使用 requestAnimationFrame 而非 setInterval：

function smoothScroll() {
  let start = null;
  const duration = 1000;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    window.scrollTo(0, easeInOutCubic(progress, 0, 1000, duration));
    if (progress < duration) {
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}