react实现列表自动滚动
实现列表自动滚动的核心方法
使用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动画平移内容：
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）
快速集成方案 安装库后直接使用预置组件：
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以获得更流畅的效果。
