[React]스크롤위치 가져오기 코드

스크롤의 위치를 가져오기!

  const [position, setPosition] = useState(0);
  function onScroll() {
    setPosition(window.scrollY);
  }
  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, []);  

▶ 스크롤의 위치를 포지션 값으로 가져온다.

▶ 이걸 이용하여 글의 이동을 해보자.

//글의 상하방향 이동하기
<div className="bg bg1"style={{backgroundPositionY:position/2}}>

//글의 좌우 방향 이동하기
<p className="desc"style={{transform:`translateX(${-position}px)`}}>

// 스크롤에 따라 투명도 변하면서 나타나기
<p className="desc3"style={{opacity:(position-1300)/500}}>