[애플클론] react scroll event

nosiba·2022년 6월 7일

scroll 값을 구해 특정 구간에서 폰트 강조하는 기능 구현하기

⭐️ scroll Y 값 구하기

scroll 값을 저장할 state 만들기
window.pageYOffset 속성값을 이용해 스크롤값 구하기

pageYOffset은 문서가 수직으로 얼만큼 이동하였는지,이동한 값을 픽셀단위로 반환해주는 속성이며, scrollY와 브라우저 호환성의 차이가 있을 뿐, 같은 기능을 한다. (scrollY보다 pageYOffset이 호환성이 좋음)
useEffect 훅을 이용하여 스크롤 이벤트 실행

🖥 코드보기

  const [scrollY, setScrollY] = useState(0);

  const handleScroll = () => {
    const scrollPosition = window.pageYOffset;
    setScrollY(scrollPosition)
  };

  useEffect( () => {
    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, []);

  console.log(scrollY)

⭐️ scrollY 값 활용하기

위에서 구한 scrollY를 활용하여, 특정 값에서만 opacity: 1을 갖는 className을 부착하여 폰트 강조하기 (삼항 연산자 활용)

🖥 코드보기

// css
  .show {
    opacity: 1;
  }

  .hide {
    opacity: 0.3;
  }


<ul>
  <li className={ ( 725 < scrollY && scrollY < 928 ) ? 'show' : 'hide' }>비약적으로 강화된 카메라 시스템.</li>
  <li className={ ( 928 < scrollY && scrollY < 1100 ) ? 'show' : 'hide' } }>뛰어난 반응성으로 매일 하던 제스처에 전혀 새로운 감각을 선사하는 디스플레이.</li>
  <li className={ ( 1100 < scrollY && scrollY < 1330 ) ? 'show' : 'hide' } >스마트폰 사상 가장 빠른 칩.</li>
  <li className={ ( 1330 < scrollY && scrollY < 1550 ) ? 'show' : 'hide' } >독보적인 내구성. 획기적인 도약을 이뤄낸 배터리 성능까지.</li>
</ul>