当前位置：首页 > React

react如何实现文字垂直滚动

2026-01-25 03:25:19React

实现文字垂直滚动的方法

在React中实现文字垂直滚动可以通过CSS动画或JavaScript动态控制两种方式完成。以下是具体实现方法：

使用CSS动画实现

通过CSS的@keyframes和transform属性创建滚动效果，结合React组件控制动画状态。

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

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

export default ScrollText;

对应CSS文件（ScrollText.css）：

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

.scroll-text {
  position: absolute;
  width: 100%;
  animation: scroll 10s linear infinite;
}

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

使用JavaScript动态控制

通过requestAnimationFrame或setInterval动态修改元素位置，实现更灵活的滚动控制。

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

const ScrollText = ({ text, speed = 1 }) => {
  const textRef = useRef(null);

  useEffect(() => {
    const element = textRef.current;
    let position = 0;
    let animationId;

    const animate = () => {
      position -= speed;
      if (position < -element.scrollHeight) {
        position = element.parentElement.offsetHeight;
      }
      element.style.transform = `translateY(${position}px)`;
      animationId = requestAnimationFrame(animate);
    };

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

  return (
    <div style={{ height: '100px', overflow: 'hidden', position: 'relative' }}>
      <div ref={textRef} style={{ position: 'absolute', width: '100%' }}>
        {text}
      </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 direction="up" height={200} speed={50}>
      <p>需要滚动的文字内容...</p>
    </Marquee>
  );
};

export default ScrollText;