react div 开始滚动，鼠标移上去停止滚动，鼠标离开继续滚动

最新推荐文章于 2024-05-22 11:20:37 发布

原创最新推荐文章于 2024-05-22 11:20:37 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#部分div滚动 #鼠标移上去不滚动 #鼠标离开滚动 #react

开发过程总结专栏收录该内容

66 篇文章

订阅专栏

本文介绍了一种使用React实现的滚动图表自动更新方法，通过setInterval结合scrollTop属性，使图表在页面上自动滚动，同时利用鼠标事件mouseover和mouseout控制滚动的暂停与恢复，确保用户体验。文章详细展示了如何在多个图表组件中应用这一机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react div 一开始滚动滚动条，鼠标移上去停止滚动，鼠标离开继续滚动

关键代码：

（1）<div className="bar-group-item-chart" ref={ node => this.contentNode1 = node }>

（2）setInterval()、clearInterval()

（3）addEventListener("mouseover",function(){}）、addEventListener("mouseout",function(){}）

（4）if(targetNode.clientHeight + targetNode.scrollTop ===targetNode.scrollHeight){
targetNode.scrollTop = 0
}

class BarGroup extends Component {
componentDidMount() {
      this.scrollControl(this.contentNode1)
      this.scrollControl(this.contentNode2)
      this.scrollControl(this.contentNode3)
      this.scrollControl(this.contentNode4)
  }

  scrollControl(targetNode){
      let time = setInterval(()=>{
        targetNode.scrollTop = targetNode.scrollTop+50
        if(targetNode.clientHeight + targetNode.scrollTop ===targetNode.scrollHeight){
          targetNode.scrollTop = 0
        }
      },1000)

      targetNode.addEventListener("mouseover",function(){
        clearInterval(time);
      })

      targetNode.addEventListener("mouseout",function(){
        time = setInterval(()=>{
          targetNode.scrollTop = targetNode.scrollTop+30
          if(targetNode.clientHeight+targetNode.scrollTop ===targetNode.scrollHeight){
            targetNode.scrollTop = 0
          }
        },1000)
      })
  }

render(){
return (
<div>
<div className="bar-group" style={{position: 'relative'}}>
        <div className="bar-group-item">
          <div className="bar-group-item-title">名称</div>
          <div className="bar-group-item-chart" ref={ node => this.contentNode1 = node }>
            <BarChart
              name="名称" 
              data={this.props.data['数据']}
              unit="人"
              color="#59afe8"
              width="100%"
              height='500px'
              resize={this.props.resize} 
            />
          </div>
        </div>
<div className="bar-group-item-title">名称</div>
          <div className="bar-group-item-chart" ref={ node => this.contentNode2 = node }>
            <BarChart
              name="名称" 
              data={this.props.data['数据']}
              unit="人"
              color="#59afe8"
              width="100%"
              height='500px'
              resize={this.props.resize} 
            />
          </div>
        </div>
<div className="bar-group-item-title">名称</div>
          <div className="bar-group-item-chart" ref={ node => this.contentNode3 = node }>
            <BarChart
              name="名称" 
              data={this.props.data['数据']}
              unit="人"
              color="#59afe8"
              width="100%"
              height='500px'
              resize={this.props.resize} 
            />
          </div>
        </div>
<div className="bar-group-item-title">名称</div>
          <div className="bar-group-item-chart" ref={ node => this.contentNode4 = node }>
            <BarChart
              name="名称" 
              data={this.props.data['数据']}
              unit="人"
              color="#59afe8"
              width="100%"
              height='500px'
              resize={this.props.resize} 
            />
          </div>
        </div>
</div>
</div>
)
}
}