javascript - Divs 在 react.js 中使用 translateY() 反向滚动

Question

我正在尝试使用 React.js 创建一种像这样的滚动:http://spassky-fischer.fr/ ，其中两个 div 以相反的方向滚动。他们正在使用 transform: translateY()，我也尝试实现它，但我不知道我哪里错了。这是元素的架构。当前版本也在这里:http://noiseless-tendency.surge.sh/

App.js:

ComponentDidMount(){
    window.addEventListener("scroll", this.scrollHandler);
} 

...

scrollHandler = () => {
    this.setState({
      scrollPositionY: window.scrollY
    })
}

...

render() {
    return (
      <div className="App">
          <MainItemsContainer {...this.state} />
      </div>
    );
  }

MainItemsContainer.js:

render() {

    let style_first = {
      transform: `translateY(${this.props.scrollPositionY})`,
      overflow: "hidden"
    }

    let style_second = {
      transform: `translateY(-${this.props.scrollPositionY})`,
      overflow: "hidden"
    }


    return (
      <div className="main_items_container">
        <section
        style={style_first}
        className="main_items_container_child">
          <ItemsContainer {...this.props}/>
        </section>
        <section 
          style={style_second}
          className="main_items_container_child">
          <ItemsContainer {...this.props}/>
        </section>
      </div>
    );
  }

App.css:

.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;
}

Answer 1

您链接的示例站点实际上使用了 wheel 事件而不是 scroll 事件。看起来他们使用这个库来完成它:https://swiperjs.com/demos/ .我的理解是 scroll 事件只有在有滚动条时才会触发，这就是您的事件处理程序没有触发的原因。

我创建了一个 Code Sandbox在 React 中产生你想要的效果。它确实依靠 jQuery 来计算整个元素的高度，并为左半部分设置初始转换。然而，这些只是方便的方法，如果您不想将 jQuery 作为依赖项，您可以很容易地找到解决方法。