在 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 來實現相同的結果。