模块自定义滚动

代码写的比较匆忙，后续优化

// state
state: {
    responseData: [],
        chartStyle: {   // 父组件相关的宽高
         0,
            height: 0,
    }
    yScrollStatus: 'stop',
        yScrollTop1: 0,  // container_child_1 往上滚动的距离
            yScrollTop2: 0, // container_child_2 往上滚动的距离
                yScrollTop2Show: false  // container_child_2 是否展示
}

// render
<div className="container_wrapper_parent">
    <div className="container_parent">
        <div className="contanier_child" ref="container_child_1" style={{ transform: `translateY(${this.state.yScrollTop1 + 'px'})` }}>
            <ChartComponent onMousePlotMove={this.onMousePlotMove} onMousePlotLeave={this.onMousePlotLeave}></ChartComponent>
        </div>
        {
            this.state.yScrollTop2Show ?
                <div className="contanier_child" ref="container_child_2" style={{ transform: `translateY(${this.state.yScrollTop2 + 'px'})` }}>
                    <ChartComponent onMousePlotMove={this.onMousePlotMove} onMousePlotLeave={this.onMousePlotLeave}></ChartComponent>
                </div> : null
        }
    </div>
</div>
    // ChartComponent
    <Chart onPlotMove={(ev) => { this.props.onMousePlotMove }} onPlotLeave={(ev) => { this.props.onMousePlotLeave }}></Chart>

// function
componentDidMount(){
    // 调用后台接口获取数据responseData
    // ...
    this.setState({
        responseData: responseData
    }, () => {
        const mainHeight = this.refs.container_child_1.clientHeight
        if (mainHeight > this.state.chartStyle.height) {
            this.setState({
                yScrollTop2: this.state.container_child_1.clientHeight,
                yScrollStatus: 'stop',
                yScrollTop2Show: true,
            }, （）=> {
                this.setYScrollInterval()
            })
        }
    })
}
setYScrollInterval = () => {
    this.interval = setInterval(() => {
        this.setState((
            yScrollTop1: this.state.yScrollStatus === 'start' ? this.state.yScrollTop1 - 5 : this.state.yScrollTop1,
            yScrollTop2: this.state.yScrollStatus === 'start' ? this.state.yScrollTop2 - 5 : this.state.yScrollTop2,
        ), () => {
            if (Math.abs(this.state.yScrollTop1) >= this.refs.container_child_1.clientHeight) {
                this.setState({
                    yScrollTop1: `${this.refs.container_child_2.clientHeight}`
                })
            }
            if (Math.abs(this.state.yScrollTop2) >= this.refs.container_child_2.clientHeight) {
                this.setState({
                    yScrollTop2: `${this.refs.container_child_1.clientHeight}`
                })
            }
        })
}, 5);
}
onMousePlotMove = （）=> {
    this.setState({ yScrollStatus: 'stop' })
}
onMousePlotLeave = （）=> {
    this.setState({ yScrollStatus: 'start' })
}

/* style */
.container_wrapper_parent{
     x; height: y; overflow: hiddeden
        .container_parent{
         calc(x + 20px); height: calc(y + 20px);  /*为隐藏滚动条*/
        overflow-y: scroll; position: relative;
        .contanier_child{ position: absolute; }
    }
}