博客

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