在 react.js 中使用 translateY() 反向滚动 Div

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事件仅在有滚动条时才会触发，这就是您的事件处理程序没有触发的原因。

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

Answer 2

因此，您可以使用钩子并通过状态更改时的内联样式传递自定义 css var 来更新您的 translateY。 我还没有测试，但我希望你明白我的意思。

let elRef = useRef(null)

let[ height, setHeight] = useState()

使用 useLayoutEffect 钩子添加事件监听器

useLayoutEffect (()=>{
  if(!elRef) return
  elRef.current.addEventListener("scroll", setHeight(elRef.current.scrollY));

return  elRef.current.removeEventListener("scroll", setHeight());
}, )

并将 ref 放在你最外面的 div 上，所以你的外部 div 看起来像

<div className='container' ref={elRef} style{{ --height: height}} > 
 <div className='columOne' > </div>
 <div className='columTwo' > </div>
</div>

在您的 css 中（我没有列出所有需要的内容，只是展示了如何使用自定义 css var

.container{
display: flex;
flex-direction: row
}

在相同大小的列中

   .columnOne{
      transform: `translateY(calc(var(--height) * 1px)`,
      overflow: "hidden"
    }

 .columnTwo{
      transform: `translateY(-calc(var(--height) * 1px)`,
      overflow: "hidden"
    }

这有帮助吗。 让我知道我是否可以更清楚。 或者使用样式化组件并传入一个 prop 来实现相同的结果。