<div style={{height: '80%',"overflowY": 'auto',margin:0}} id="review_box"
onMouseEnter={()=>{rollStop()}} onMouseLeave={()=>{rollStart(60)}}>
<ul style={{margin:0}} id="comment1">
{
tdtzList.map((item,index)=>{
return (
<li key={index}>
<div className='left'>{item.outage_time}</div>
<div className='right'>{item.outage_area}</div>
</li>
)
})
}
</ul>
</div>
const [timer,setTimer] = useState(null) // 定时器
useEffect(()=>{
roll(60)
return()=>{
//清理副作用
clearInterval(timer)
}
},[])
const rollStop =()=>{
clearInterval(timer)
}
const rollStart =(t)=>{
var ulbox = document.getElementById("review_box");
rollStop();
setTimer(setInterval(()=>{
// 当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollHeight - ulbox.scrollTop === ulbox.clientHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}, t))
}
const roll = (t)=> {
var ulbox = document.getElementById("review_box");
ulbox.scrollTop = 0;
rollStart(t);
}
#review_box{
li{
display: flex;
height: 40px;
line-height: 40px;
margin: 0 10px;
color: #10b3b3;
.left{
width: 45%;
}
.right{
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
li:nth-child(even){
background-color: #f6fbff;
}
}
/* 设置滚动条的样式 */
#review_box::-webkit-scrollbar {
width: 0px;
height: 0px;
}