react 封装无缝滚动组件

记录，以防忘记

SeamlessScroll.tsx

import React, { useEffect, useRef, useState } from 'react';interface SeamlessScrollProps {children: React.ReactNode;speed?: number; // 滚动速度，单位：像素/秒minItems?: number; // 最小项目数量，默认3个className?: string;style?: React.CSSProperties;
}/*** 无缝滚动组件（从下往上滚动）* @param children - 需要滚动的内容* @param speed - 滚动速度，默认 50 像素/秒* @param minItems - 最小项目数量，默认3个，只有超过这个数量才会滚动* @param className - 自定义类名* @param style - 自定义样式*/
const SeamlessScroll = ({ children, speed = 50, minItems = 3, className = '', style = {} }: SeamlessScrollProps) => {const containerRef = useRef<HTMLDivElement>(null);const contentRef = useRef<HTMLDivElement>(null);const [isHovered, setIsHovered] = useState(false);const animationFrameRef = useRef<number>();const lastTimeRef = useRef<number>(0);const positionRef = useRef<number>(0);const [shouldScroll, setShouldScroll] = useState(false);// 检查是否需要滚动useEffect(() => {if (contentRef.current) {const itemCount = React.Children.count(children);setShouldScroll(itemCount > minItems);}}, [children, minItems]);// 计算滚动距离const calculateScrollDistance = (deltaTime: number) => {return (speed * deltaTime) / 1000; // 将速度转换为每毫秒的滚动距离};// 处理滚动动画const handleScroll = (timestamp: number) => {if (!containerRef.current || !contentRef.current || !shouldScroll) return;const deltaTime = timestamp - lastTimeRef.current;lastTimeRef.current = timestamp;const scrollDistance = calculateScrollDistance(deltaTime);const content = contentRef.current;// 更新位置positionRef.current += scrollDistance;// 当滚动到一半时重置位置if (positionRef.current >= content.offsetHeight / 2) {positionRef.current = 0;}// 应用变换content.style.transform = `translateY(-${positionRef.current}px)`;if (!isHovered) {animationFrameRef.current = requestAnimationFrame(handleScroll);}};// 开始滚动useEffect(() => {if (!isHovered && shouldScroll) {lastTimeRef.current = performance.now();animationFrameRef.current = requestAnimationFrame(handleScroll);}return () => {if (animationFrameRef.current) {cancelAnimationFrame(animationFrameRef.current);}};}, [isHovered, speed, shouldScroll]);// 复制内容以实现无缝滚动const duplicatedContent = (<divref={contentRef}style={{ display: 'block', width: '100%', willChange: 'transform', transition: 'none' }}        >{children}{shouldScroll && children}</div>);return (<divref={containerRef}className={`seamless-scroll ${className}`}style={{position: 'relative',overflow: 'hidden',...style,}}onMouseEnter={() => setIsHovered(true)}onMouseLeave={() => setIsHovered(false)}>{duplicatedContent}</div>);
};export default SeamlessScroll; 

使用

<SeamlessScroll speed={30} minItems={4} style={{ height: '700px' }}><div style={{ padding: '10px' }}><List dataSource={data} renderItem={(item) => (<List.Item><Card style={{ width: '100%' }}><h3>{item.title}</h3><p>{item.content}</p></Card></List.Item>)}/></div>
</SeamlessScroll>