如何使用一个元素滚动到reactjs中的多个元素一起滚动到另一元素滚动

Question

我想一起滚动2个元素。 但是我想使用reactjs实现它。我在codeendbox中创建一个示例。 This is the Link of my example.

我也正在获得滚动量。 这项功能是由jquery这样完成的。

$('.scroller').scroll(function(e) { 
   $('.scroller').scrollLeft(e.target.scrollLeft);
});

我的孩子是

class ChildComponent extends Component {
handlescrollleft = (event) =>{
  event.preventDefault();
  let scrollLeft = event.currentTarget.scrollLeft;
  console.log("ScrollLeft --> ", scrollLeft);
};
render() {return (
    <div>
        <ChildElement />
        <ScrollBar
        handlescrollleft={this.handlescrollleft}/>
    </div>
   );
 }
}

这是滚动条组件。

class ScrollBar extends Component {
   render() {
        return (
        <div className="scrollBar scrollable"
            onScroll={(e) => this.props.handlescrollleft(e)}>
            <div className="innerElem"></div>
        </div>
    );
 }
}