試圖在反應中檢測滾動方向

Question

我想在滾動方向上移動一些 html 個元素。 我添加了一個滾動事件偵聽器，它更新滾動 position 的 state。我還有一個 useRef，每次更改時都會存儲滾動 position 的先前值。 我比較之前的值和當前的scroll position。如果scroll position更大，那么說明滾動方向是向下的。 否則，滾動方向向上。 但是，此代碼不起作用。 條件似乎總是錯誤的。 我怎樣才能使用反應檢測滾動方向。

import './App.css';

function App() {

  const [scrollPosition, setScrollPosition]=useState(window.scrollY);
  const prevScrollPosition=useRef(0);

  useEffect(()=>{
    window.addEventListener('scroll',((e)=>{
      setScrollPosition(window.scrollY);
    }))
  },[])

  useEffect(()=>{
    prevScrollPosition.current=scrollPosition;

    
    
    if(scrollPosition>prevScrollPosition.current){
      document.querySelector(".scalp").style.top=(document.querySelector(".scalp").offsetTop+7)+"px";
      document.querySelector(".brain").style.top=(document.querySelector(".brain").offsetTop+3)+"px";

    }else{
      document.querySelector(".scalp").style.top=(document.querySelector(".scalp").offsetTop-7)+"px";
      document.querySelector(".brain").style.top=(document.querySelector(".brain").offsetTop-3)+"px";
    }

  },[scrollPosition])

  
  
  return (
    <div className="App">
      
      <video className="cloudsVideo" autoplay playsinline autoplay loop muted src="Pexels Videos 3723.mp4" muted loop autoplay alt="clouds"></video>
      <video className="spaceVideo" autoplay playsinline autoplay loop muted src="pexels-ahnaf-piash-5747525.mp4" muted loop autoplay alt="space"></video>
      <img className="scalp" src="scalp.png"/>
      <img className="brain" src="Brain-PNG-Photos.png"/>
      <img className="head" src="head.png"/>

      <h1>{scrollPosition}</h1>
      <h1>{prevScrollPosition.current}</h1>
      <h1>{scrollPosition-prevScrollPosition.current}</h1>
      

      
    </div>
  );
}

export default App;

Answer 1

我認為這樣的事情對你有用：

import { useState, useRef, useEffect, useCallback } from 'react';

export const useScrollDirection = () => {
  const [scrollPosition, setScrollPosition] = useState<number>(0);
  const [isScrollingUp, setIsScrollingUp] = useState<boolean>(false);
  const [isScrollingDown, setIsScrollingDown] = useState<boolean>(false);
  const prevScrollPosition = useRef<number>(0);

  const handleScroll = useCallback(() => {
    prevScrollPosition.current = scrollPosition;
    const position = window.pageYOffset;
    setScrollPosition(position);
  }, [scrollPosition]);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    if (scrollPosition - prevScrollPosition.current > 0) {
      setIsScrollingUp(false);
      setIsScrollingDown(true);
    } else if (scrollPosition - prevScrollPosition.current < 0) {
      setIsScrollingDown(false);
      setIsScrollingUp(true);
    }
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll, scrollPosition]);

  return { isScrollingDown, isScrollingUp };
};