当前位置：首页 > React

react如何实现文字滚动

2026-01-24 07:24:51React

实现文字滚动的方法

在React中实现文字滚动可以通过CSS动画或JavaScript动态控制样式来实现。以下是几种常见的方法：

使用CSS动画实现横向滚动

通过CSS的@keyframes和animation属性实现文字横向无限滚动。

import React from 'react';
import './ScrollText.css';

const ScrollText = () => {
  return (
    <div className="scroll-container">
      <div className="scroll-text">
        这是一段需要滚动的文字内容，可以根据需要调整长度。
      </div>
    </div>
  );
};

export default ScrollText;

对应的CSS文件（ScrollText.css）：

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

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

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

使用JavaScript动态控制滚动

通过React的useEffect和useState动态更新元素位置实现滚动效果。

import React, { useState, useEffect, useRef } from 'react';

const ScrollText = () => {
  const [position, setPosition] = useState(0);
  const textRef = useRef(null);

  useEffect(() => {
    const scrollSpeed = 1;
    const animationFrame = requestAnimationFrame(function scroll() {
      setPosition(prev => {
        if (prev <= -textRef.current.offsetWidth) {
          return window.innerWidth;
        }
        return prev - scrollSpeed;
      });
      requestAnimationFrame(scroll);
    });

    return () => cancelAnimationFrame(animationFrame);
  }, []);

  return (
    <div style={{ overflow: 'hidden', whiteSpace: 'nowrap' }}>
      <div
        ref={textRef}
        style={{ display: 'inline-block', transform: `translateX(${position}px)` }}
      >
        这是一段需要滚动的文字内容，可以根据需要调整长度。
      </div>
    </div>
  );
};

export default ScrollText;

使用第三方库实现

如果需要更复杂的滚动效果，可以使用第三方库如react-fast-marquee。

安装：

npm install react-fast-marquee

使用示例：

import React from 'react';
import Marquee from 'react-fast-marquee';

const ScrollText = () => {
  return (
    <Marquee speed={50}>
      这是一段需要滚动的文字内容，可以根据需要调整长度。
    </Marquee>
  );
};

export default ScrollText;

垂直滚动实现

通过修改CSS动画的translateY属性可以实现垂直滚动效果。

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

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

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

以上方法可以根据具体需求选择，CSS动画适合简单场景，JavaScript控制更灵活，第三方库则能快速实现复杂效果。

react如何实现文字滚动