当前位置：首页 > React

react实现文字滚动

2026-01-27 05:26:26React

实现文字滚动的几种方法

使用CSS动画实现滚动 通过CSS的@keyframes和transform属性实现横向滚动效果。将文字包裹在容器中，设置动画从右向左移动。

.scroll-container {
  white-space: nowrap;
  overflow: hidden;
}

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

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

function ScrollingText({ text }) {
  return (
    <div className="scroll-container">
      <div className="scroll-text">{text}</div>
    </div>
  );
}

使用requestAnimationFrame实现可控滚动 通过JavaScript控制滚动位置，实现更精确的滚动控制。适合需要动态调整速度或暂停的场景。

react实现文字滚动

import { useEffect, useRef } from 'react';

function ScrollingText({ text, speed = 1 }) {
  const containerRef = useRef();
  const textRef = useRef();
  const pos = useRef(0);

  useEffect(() => {
    const container = containerRef.current;
    const textEl = textRef.current;
    let animationId;

    const animate = () => {
      pos.current -= speed;
      if (-pos.current > textEl.offsetWidth) {
        pos.current = container.offsetWidth;
      }
      textEl.style.transform = `translateX(${pos.current}px)`;
      animationId = requestAnimationFrame(animate);
    };

    animate();
    return () => cancelAnimationFrame(animationId);
  }, [speed]);

  return (
    <div ref={containerRef} style={{ overflow: 'hidden' }}>
      <div ref={textRef} style={{ whiteSpace: 'nowrap' }}>
        {text}
      </div>
    </div>
  );
}

使用第三方库实现复杂效果 对于需要复杂效果（如弹性滚动、渐变消失等），可以考虑使用专门库如react-fast-marquee。

react实现文字滚动

import Marquee from 'react-fast-marquee';

function ScrollingText() {
  return (
    <Marquee speed={50}>
      这里是要滚动的文字内容...
    </Marquee>
  );
}

垂直滚动实现方法 通过修改CSS动画关键帧实现垂直方向的滚动效果。

.vertical-scroll {
  height: 100px;
  overflow: hidden;
}

.vertical-text {
  animation: verticalScroll 10s linear infinite;
}

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

无限循环衔接处理 当文字内容较短时，需要复制内容实现无缝衔接。通过JavaScript动态检测内容宽度，自动复制文本。

function InfiniteScrollingText({ text }) {
  const containerRef = useRef();
  const [displayText, setDisplayText] = useState(text);

  useEffect(() => {
    const container = containerRef.current;
    if (container.scrollWidth <= container.offsetWidth) {
      setDisplayText(`${text} ${text}`); // 复制内容
    }
  }, [text]);

  return (
    <div className="scroll-container" ref={containerRef}>
      <div className="scroll-text">{displayText}</div>
    </div>
  );
}