useRef 활용 특정 DOM으로 이동시키기

Question

마우스 휠 이벤트가 발생할 경우, page값을 활용하여 해당 번호의 DOM으로 이동시키는 것을 구현했습니다.현재 동작이 되지 않는 이유가 뭔지 모르겠습니다. const scrollRef = useRef([]); const [page, setPage] = useState(1); const moveY = (e : React.WheelEvent) => { if(page === 0 || page === 6){ console.log(page) return; } if(e.deltaY === 0) return; else if(e.deltaY > 0){ setPage(page+1); } else if(e.deltaY < 0){ setPage(page-1) } scrollRef.current[page].scrollIntoView({behavior : "smooth"}); console.log(scrollRef.current[page]) }; return(

(scrollRef.current[1] = el)}> (scrollRef.current[2] = el)}> ... (scrollRef.current[6] = el)}> <span style={{color : "#b11717"}}></span>

)다음과 같이 이벤트 리스너를 등록했는데, 페이지 값이 갱신되지 않습니다. 무엇이 문제일까요.... const scrollRef = useRef([]); const [page, setPage] = useState(1); useEffect(()=>{ document.getElementById("service")?.addEventListener("wheel", moveY)}, []) const moveY = (e : any) => { if(page === 0 || page === 6){ return; } if(e.deltaY > 0){ setPage(page+1); } else if(e.deltaY < 0){ setPage(page-1) } console.log(`e.deltaY : ${e.deltaY}`) scrollRef.current[page].scrollIntoView({behavior : "smooth"}); console.log(`page : ${page}`) }; return(

(scrollRef.current[1] = el)}> (scrollRef.current[2] = el)}> ... (scrollRef.current[6] = el)}> <span style={{color : "#b11717"}}></span>

JUNSO · Answer

useEffect(() => { document.getElementById("test").addEventListener("wheel", moveY)},[])

codezzzz · Answer

https://velog.io/@aimzero9303/Full-Page-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%EB%A5%BC-%EC%A7%81%EC%A0%91-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90 참고 해보세요.

useRef 활용 특정 DOM으로 이동시키기

2개의 답변

Q&A 목록