마우스 스크롤 이벤트를 이럴때는 어떻게 써야하나요?

Question

useEffect(() => { const handleScroll = (event) => { const scrollY = event.deltaY; console.log(scrollY, "scsc"); const currentScroll = window.pageYOffset; if (scrollY > 0) { setTimeout(() => { const newAnimateValue = animateValue === "initial" ? "sectionOne" : "sectionTwo"; setAnimateValue(newAnimateValue); }, 500); } else if (scrollY < 0) { setTimeout(() => { if (animateValue === "sectionOne") { const newAnimateValue = "initial"; setAnimateValue(newAnimateValue); } else if (animateValue === "sectionTwo") { const newAnimateValue = "sectionOne"; setAnimateValue(newAnimateValue); } }, 500); } console.log(animateValue, "animateValue"); if (currentScroll === 0 && scrollY < 0 && animateValue === "initial") { setPage2(1); setScrollCount(0); wholePageState(page2); } }; window.addEventListener("wheel", handleScroll); return () => { window.removeEventListener("wheel", handleScroll); }; }, [animateValue]);scrollY 변수로 브라우저상에서 마우스 스크롤을 감지하고 이에 따라 state값을 변경하려고 하는데이 경우 문제가 마우스스크롤에 따라 반환되는 scrollY값은 단발성으로 하나의 값이 나오는것이 아닌 아래로 스크롤시 0에서 스크롤 한 만큼의 숫자까지 양수로 출력되고 반대시 음수로 출력됩니다결국 scrollY > 0 일 경우 state값이 initial 에서 sectionOne으로 한번 변경뒤 곧바로 sectionTwo로 변경됩니다 의도했던 sectionOne의 경우를 뛰어넘고 곧바로 sectionTwo로 넘어가게되는 문제가 발생합니다.이 문제를 해결하기 위해서 scrollY의 값을 0보다 큰값이 아닌 적당한 수 예를 들어 scrollY === 5 같은 경우로도 바꿔봤지만scrollY의 값이 0에서 1의 간격으로 커지는것도 아니고 사용자의 스크롤양에 따라 2,4,7,15 같이 불규칙으로 나와서 특정 숫자로 고정하는건의미가 없더라구요 그래서 setTimeout을 추가해 코드를 변경했습니다. 문제는 해결됐지만 뭔가 어색한 느낌이 남아서 질문을 올립니다.제가 의도한 코드는 마우스 스크롤방향에 따라 state값을 변경하고 해당 state 변수로 저장된 값에 따라 html의 코드에 애니메이션 효과를 적용하려했는데보통 다른 분들은 이런 경우 어떤 식으로 코드를 구성하시나요?

마우스 스크롤 이벤트를 이럴때는 어떻게 써야하나요?

0개의 답변

Q&A 목록