next.js에서 scroll이벤트 활용하기

header를 스크롤의 반응에 따라 숨김처리를 하기위해서
window에 이벤트를 등록해봄.

  const handleScroll = useCallback((e) => {
    console.log(e)
  }, [])
  
  useEffect(() => {
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

결론은 동작하지 않음.

다른 이벤트를 등록했을때는 동작하지만 scroll이벤트는 트리거 되지 않았다. react의 문제라기보다는 next.js에서 발생하는 이슈라고 판단한다.

관련 참고링크

• Window scroll event not fired
  

따라서 스크롤이벤트를 활용할 컴포넌트의 ref를 바인딩해서 해당 참조객체에 이벤트를 등록하고 트리거링 함.

  const handleScroll = useCallback((e) => {
    console.log(e)
  }, [])
  
  useLayoutEffect(() => {
    if (layoutRef.current) {
      layoutRef.current.addEventListener('scroll', handleScroll)
      return () => layoutRef.current.removeEventListener('scroll', handleScroll)
    }
  }, [])

참고로 컴포넌트에 onScroll이벤트로 바인딩해도 똑같이 잘 동작함.

window객체를 활용한다면 스크롤위치변화를 scrollY로 할 예정이었으나 내가 바인딩한 객체에는 해당 속성이 없었다. 그래서 target.scrollTop을 활용해서 위로 스크롤되는지 아래로 스크롤 되는지 판단할 예정.

throttle을 구현해서 같이 활용하면 될 듯하다.