title: Divs Reverse scroll with translateY() in react.js
body: <p>I'm trying to create with React.js a type of scroll like this one: <a href="http://spassky-fischer.fr/" rel="nofollow noreferrer">http://spassky-fischer.fr/</a>, where two divs are scrolling in inverse directions. They are using <code>transform: translateY()</code>, and I tried to implement it as well but I don't get where I'm wrong here. Here's the architecture of the projet. The current version is also here: <a href="http://noiseless-tendency.surge.sh/" rel="nofollow noreferrer">http://noiseless-tendency.surge.sh/</a></p>
  
  <p><code>App.js</code>:</p>
  
  <pre><code>ComponentDidMount(){
      window.addEventListener("scroll", this.scrollHandler);
  } 
  
  ...
  
  scrollHandler = () =&gt; {
      this.setState({
        scrollPositionY: window.scrollY
      })
  }
  
  ...
  
  render() {
      return (
        &lt;div className="App"&gt;
            &lt;MainItemsContainer {...this.state} /&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p><code>MainItemsContainer.js</code>:</p>
  
  <pre><code>render() {
  
      let style_first = {
        transform: `translateY(${this.props.scrollPositionY})`,
        overflow: "hidden"
      }
  
      let style_second = {
        transform: `translateY(-${this.props.scrollPositionY})`,
        overflow: "hidden"
      }
  
  
      return (
        &lt;div className="main_items_container"&gt;
          &lt;section
          style={style_first}
          className="main_items_container_child"&gt;
            &lt;ItemsContainer {...this.props}/&gt;
          &lt;/section&gt;
          &lt;section 
            style={style_second}
            className="main_items_container_child"&gt;
            &lt;ItemsContainer {...this.props}/&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p><code>App.css</code>:</p>
  
  <pre><code>.main_items_container {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
  }
  
  .main_items_container .main_items_container_child{
    width: 50%;
    height: 100vh;
    overflow: scroll;
  }
  </code></pre>