当前位置：首页 > React

react实现列表自动滚动

2026-01-27 19:15:38React

实现列表自动滚动的核心方法

使用scrollTop属性控制滚动 通过定时器逐步修改容器的scrollTop值实现平滑滚动。需要获取DOM元素的引用，使用useRef配合useEffect管理滚动逻辑。

const containerRef = useRef(null);
const [scrollPosition, setScrollPosition] = useState(0);

useEffect(() => {
  const timer = setInterval(() => {
    if (containerRef.current) {
      const newPos = scrollPosition + 1;
      containerRef.current.scrollTop = newPos;
      setScrollPosition(newPos);

      // 到达底部时重置
      if (newPos >= containerRef.current.scrollHeight - containerRef.current.clientHeight) {
        setScrollPosition(0);
      }
    }
  }, 50);
  return () => clearInterval(timer);
}, [scrollPosition]);

CSS关键样式 确保容器有固定高度和overflow-y: auto，列表项高度需保持一致：

.scroll-container {
  height: 300px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

使用CSS动画实现无缝滚动

transform动画方案 适用于无限循环的场景，通过CSS动画平移内容：

react实现列表自动滚动

const items = [...]; // 列表数据
const duplicatedItems = [...items, ...items]; // 复制一份实现无缝衔接

return (
  <div className="scroll-wrapper">
    <div className="scroll-content">
      {duplicatedItems.map((item, index) => (
        <div key={`${item.id}-${index}`}>{item.text}</div>
      ))}
    </div>
  </div>
);

配套CSS动画

.scroll-wrapper {
  height: 300px;
  overflow: hidden;
}
.scroll-content {
  animation: scroll 20s linear infinite;
}
@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

第三方库方案（react-fast-marquee）

快速集成方案 安装库后直接使用预置组件：

react实现列表自动滚动

npm install react-fast-marquee

基础实现代码

import Marquee from 'react-fast-marquee';

function AutoScrollList() {
  return (
    <Marquee speed={50} gradient={false}>
      {items.map(item => (
        <div key={item.id}>{item.text}</div>
      ))}
    </Marquee>
  );
}

性能优化注意事项

虚拟滚动技术 超长列表建议使用react-window等虚拟滚动库，仅渲染可视区域元素：

import { FixedSizeList as List } from 'react-window';

function VirtualScroll() {
  return (
    <List
      height={300}
      itemCount={1000}
      itemSize={35}
      width="100%"
    >
      {({ index, style }) => (
        <div style={style}>Item {index}</div>
      )}
    </List>
  );
}

内存回收策略 定时器组件卸载时必须清除，避免内存泄漏。动画组件应使用requestAnimationFrame替代setInterval以获得更流畅的效果。