当前位置：首页 > JavaScript

scrolltext js实现

2026-03-14 02:13:27JavaScript

使用 CSS 和 JavaScript 实现滚动文本

通过 CSS 的 animation 和 @keyframes 结合 JavaScript 动态控制，可以实现平滑的滚动文本效果。

<div class="scroll-container">
  <div class="scroll-text">这是一段需要水平滚动的文本内容，可以根据需求调整长度。</div>
</div>

.scroll-container {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
}

.scroll-text {
  display: inline-block;
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

纯 JavaScript 实现动态滚动

通过定时器动态修改元素的 scrollLeft 属性实现滚动效果：

const container = document.querySelector('.scroll-container');
const text = document.querySelector('.scroll-text');
let scrollPos = 0;

function scrollHorizontally() {
  scrollPos += 1;
  container.scrollLeft = scrollPos;

  if (scrollPos >= text.scrollWidth - container.clientWidth) {
    scrollPos = 0;
  }

  requestAnimationFrame(scrollHorizontally);
}

scrollHorizontally();

实现 Marquee 标签的现代替代方案

使用 CSS Transform 实现高性能滚动：

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
}

const marquee = document.querySelector('.marquee');
const content = document.querySelector('.marquee-content');
const contentWidth = content.scrollWidth;

function animateMarquee() {
  const progress = (performance.now() / 2000) % 1;
  const translateX = -progress * contentWidth;

  content.style.transform = `translateX(${translateX}px)`;
  requestAnimationFrame(animateMarquee);
}

animateMarquee();

实现垂直滚动效果

修改 CSS 关键帧即可实现垂直方向滚动：

.scroll-text.vertical {
  animation: scroll-vertical 8s linear infinite;
}

@keyframes scroll-vertical {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

响应式滚动文本

通过 JavaScript 检测容器宽度动态调整速度：

scrolltext js实现

function responsiveScroll() {
  const containerWidth = container.clientWidth;
  const speed = containerWidth / 50; // 根据宽度调整速度

  scrollPos += speed;
  container.scrollLeft = scrollPos;

  if (scrollPos >= text.scrollWidth) {
    scrollPos = -containerWidth;
  }

  requestAnimationFrame(responsiveScroll);
}