[React] window scroll event handler 이벤트가 안먹힐 때, scrollY always 0

Intro

안녕하세요. React에서 window.scroll 이벤트가 제대로 작동하지 않은 에러가 발생하였습니다. 아무리 window.scrollY 값을 구해도 0으로 나오더라고요. 

 

 

코드는 다음과 같습니다. 

// state
const [scrollTop, setScrollTop] = useState(0),
    headerRef = useRef<HTMLDivElement>(null),
    headerHeight = headerRef?.current?.clientHeight ?? 0,
    
// useEffect
useEffect(() => {
    const handleScroll = () => {
        setScrollTop(window.scrollY);
    };
    handleScroll();
    window.addEventListener('scroll', handleScroll);
    return () => {
        window.removeEventListener('scroll', handleScroll);
    };
}, []);

// rendering
<section style={{right: handlePositionState}} ref={bottomSheetRef}>
    <div className={scrollTop > headerHeight ? `${styles.tabArea} ${styles.active}` : styles.tabArea}>
       ....
    </div>
</section>

 

특정 버튼을 눌렀을 때 해당 컴포넌트가 팝업 뜨는 형태였습니다. 부모 component에도 scroll이 있고, 팝업 컴포넌트에도 scroll이 있었습니다. 팝업 컴포넌트가 열리는 순간 팝업 컴포넌트에 부모의 스크롤의 영향을 받지 않기 위해 body에 overflow: hidden; height: 100vh; 를 추가했어요.

 

이후 팝업 컴포넌트 안에서 특정 스크롤 위치에 도달하면 css 효과를 주기 위해 window.scrollY값이 필요했습니다. 하지만 window.scrollY 이 계속 0으로 나오더라고요.

 

Why? 

구글링 검색 결과 body에 overflow:hidden 을 삭제하면 제대로 작동한다는 내용을 찾았습니다. 하지만 제 케이스의 경우 hidden을 삭제하면 부모 컴포넌트의 스크롤이 보여지기 때문에 그럴 순 없었습니다. 이 외에도 scrollHeight, clientHeight 등 다른 속성도 사용해봤지만 결과는 똑같았습니다. 

 

How to solve problem

window 객체가 아닌 useRef를 사용하여 해당 컴포넌트의 최상위 높이를 구하여 아래와 같이 활용하니 scroll handler가 제대로 작동하였습니다. 

const bottomSheetRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const handleScroll = () => {
        setScrollTop(bottomSheetRef?.current?.scrollTop ?? 0);
    };

    handleScroll();
    bottomSheetRef?.current?.addEventListener('scroll', handleScroll);
    return () => {
        bottomSheetRef?.current?.removeEventListener('scroll', handleScroll);
    };
}, []);

 

혹시 React에서 저와 같은 상황이신 분들이 계시다면 위 방법을 한번 활용해보시길 바랍니다 :)