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;
}
