ReactJS实现Div列表自动滚动到底部再返回顶部的循环动画

针对你需要的30个div列表自动滚动到底部再返回顶部的循环动画，这里提供两种可行方案，无需依赖React Parallax这类工具：

一、纯CSS动画方案（无需JS） #

这种方案适合不需要额外交互控制的场景，通过CSS关键帧动画实现滚动效果：

实现步骤： #

1. 给列表容器设置固定高度和overflow: hidden，只显示可视区域
2. 用内部容器包裹所有列表项，通过@keyframes控制内部容器的垂直位移，模拟滚动效果

代码示例： #

<!-- HTML结构 -->
<div class="scroll-container">
  <div class="scroll-content">
    <!-- 这里放30个列表项 -->
    <div class="list-item">列表项 1</div>
    <div class="list-item">列表项 2</div>
    <!-- ... 省略剩余28个项 -->
    <div class="list-item">列表项 30</div>
  </div>
</div>

/* CSS样式 */
.scroll-container {
  height: 400px; /* 可视区域高度，可根据需求调整 */
  overflow: hidden;
  border: 1px solid #ddd;
}

.scroll-content {
  animation: scrollLoop 20s linear infinite; /* 20s为一次完整循环的时长，可调整 */
}

.list-item {
  height: 50px; /* 单个列表项高度，可调整 */
  line-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}

@keyframes scrollLoop {
  0% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(calc(-100% + 400px)); /* 滚动到底部，400px对应容器高度 */
  }
  55% {
    transform: translateY(calc(-100% + 400px)); /* 底部停留一段时间，可去掉这部分实现无缝滚动 */
  }
  100% {
    transform: translateY(0);
  }
}

说明： #

• 计算位移时，-100% + 容器高度是让最后一项刚好显示在容器底部
• 可修改animation的时长调整滚动速度，也可去掉中间的停留阶段实现无缝往返
• 如果列表项高度不固定，需要手动计算总高度替换100%

二、React + JS控制方案 #

如果需要更灵活的控制（比如滚动速度动态调整、暂停/继续功能），可以用JS结合React的useRef和useEffect实现：

代码示例： #

import { useRef, useEffect } from 'react';

function ScrollList() {
  const containerRef = useRef(null);
  let scrollDirection = 1; // 1为向下滚动，-1为向上滚动
  let scrollInterval;

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const scrollSpeed = 2; // 滚动速度，数值越大越快
    const maxScrollTop = container.scrollHeight - container.offsetHeight;

    scrollInterval = setInterval(() => {
      const currentTop = container.scrollTop;
      // 判断是否到达边界，切换滚动方向
      if (currentTop >= maxScrollTop) {
        scrollDirection = -1;
      } else if (currentTop <= 0) {
        scrollDirection = 1;
      }
      container.scrollTop += scrollDirection * scrollSpeed;
    }, 20);

    // 组件卸载时清除定时器
    return () => clearInterval(scrollInterval);
  }, []);

  // 生成30个列表项
  const listItems = Array.from({ length: 30 }, (_, index) => (
    <div key={index} className="list-item">列表项 {index + 1}</div>
  ));

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

// 对应的CSS
/*
.scroll-container {
  height: 400px;
  overflow: hidden;
  border: 1px solid #ddd;
}
.list-item {
  height: 50px;
  line-height: 50px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
}
*/

说明： #

• 通过setInterval控制滚动步长，也可以用requestAnimationFrame实现更流畅的动画
• 可以轻松添加按钮控制暂停/继续，或者调整滚动速度
• 自动判断滚动边界并切换方向，实现循环滚动

内容的提问来源于stack exchange，提问作者Elsa