当前位置：首页 > React

react如何实现文字垂直滚动

2026-03-11 12:26:24React

实现文字垂直滚动的几种方法

使用CSS动画和@keyframes 通过CSS的@keyframes和transform属性实现垂直滚动效果。定义一个动画，将文字从底部移动到顶部。

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

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

使用React的useEffect和状态控制 通过useEffect钩子和状态管理动态改变文字的位置，实现滚动效果。

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

function ScrollingText() {
  const [position, setPosition] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setPosition(prev => (prev + 1) % 100);
    }, 50);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ overflow: 'hidden', height: '50px' }}>
      <div style={{ transform: `translateY(-${position}px)` }}>
        Your scrolling text here
      </div>
    </div>
  );
}

使用第三方库（如react-fast-marquee） react-fast-marquee是一个专门用于实现滚动效果的React组件库，支持垂直滚动。

import Marquee from 'react-fast-marquee';

function VerticalMarquee() {
  return (
    <Marquee direction="up" height={200} speed={50}>
      Your scrolling text here
    </Marquee>
  );
}

自定义滚动组件

结合CSS和JavaScript实现更灵活的滚动效果。通过动态计算内容高度和容器高度，控制滚动速度和方向。

react如何实现文字垂直滚动

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

function CustomScrollText({ text }) {
  const containerRef = useRef(null);
  const contentRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const content = contentRef.current;
    let pos = 0;

    const scroll = () => {
      pos -= 1;
      if (pos <= -content.offsetHeight) pos = container.offsetHeight;
      content.style.transform = `translateY(${pos}px)`;
      requestAnimationFrame(scroll);
    };

    requestAnimationFrame(scroll);
  }, []);

  return (
    <div ref={containerRef} style={{ overflow: 'hidden', height: '100px' }}>
      <div ref={contentRef}>{text}</div>
    </div>
  );
}