鼠标移入自动向上滚动,鼠标移出停止滚动的实现


效果:鼠标移入自动向上滚动,鼠标移出停止滚动

 

滚动区域设置onMouseOver与onMouseOut事件。listEle表示需要滚动的列表dom,设置2个是为了达到无缝滚动效果。

onMouseOver清除定时器timer,达到停止滚动效果。
onMouseOut打开定时器timer,每100ms调用一次rollStart,达到滚动效果。

 

//若列表的顶部滚动到了他的高度处,就重置位置。否则顶部不断增加

 

rollStart=()=>{
    let {ul1,ul2,list}=this.refs
    if(!list) return;
    // console.log(ul1.scrollHeight)
    if (list.scrollTop >= ul1.scrollHeight-2) {
      list.scrollTop = 0;
     } else {
      list.scrollTop+=2;
    }
  }

 

在ComponentDidMount中调用定时器,进入页面后自动滚动

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM