簡單實現react 列表自動向上滾動，進入暫停，離開繼續

import React, { useEffect, useRef, useState } from 'react';
import './1.css';

function App() {
const [list] = useState([1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]);

const [isScrolle, setIsScrolle] = useState(true);

// 滾動速度，值越小，滾動越快
const speed = 30;
const warper = useRef();
const childDom1 = useRef();
const childDom2 = useRef();

// 開始滾動
useEffect(() => {
// 多拷貝一層，讓它無縫滾動
childDom2.current.innerHTML = childDom1.current.innerHTML;
let timer;
if (isScrolle) {
timer = setInterval(
() =>
warper.current.scrollTop >= childDom1.current.scrollHeight
? (warper.current.scrollTop = 0)
: warper.current.scrollTop++,
speed
);
}
return () => {
clearTimeout(timer);
};
}, [isScrolle]);

const hoverHandler = (flag) => setIsScrolle(flag);

return (
<>
<div className='parent' ref={warper}>
<div className='child' ref={childDom1}>
{list.map((item) => (
<li
key={item}
onMouseOver={() => hoverHandler(false)}
onMouseLeave={() => hoverHandler(true)}
>
{item}
</li>
))}
</div>
<div className='child' ref={childDom2}></div>
</div>
</>
);
}

export default App;
————————————————————————————————————————————————————

css

.parent {
width: 300px;
height: 40vh;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.parent::-webkit-scrollbar {
display: none;
}
/*設置的子盒子高度大於父盒子，產生溢出效果*/
.child {
height: auto;
}

.child li {
height: 50px;
margin: 2px 0;
background: #009678;
}