[React] Modal 출력 시 스크롤 막기

콘텐츠의 길이에 따라 브라우저 사이즈의 크기가 변화하는 것을 막기위해 GlobalStyle로 다음과 같이 지정하였다.

  :root {
    min-width: 1000px;
    overflow-y: scroll;
  }

그리고 useModal custom Hook의 open 함수와 close 함수를 아래와 같이 구현하였다.

  const open = useCallback(() => {
    setIsOpen(() => true);
    document.body.style.overflow = "hidden";
  }, []);

  const close = useCallback(() => {
    setIsOpen(() => false);
    document.body.style.overflow = "unset";  
  }, []);

모달이 open일 때 overflow = 'hidden'을 주었지만, 적용이 안되는 상태....

 

overflow를 hidden으로 주는 방법 대신 modal이 open 상태일 경우, body의 위치를 고정하는 형태로 수정했다.

모달이 close 상태이면 position = 'fixed'를 해제하고 prevScrollY에 저장된 위치로 이동한다.

const preventScroll = () => {
    const currentScrollY = window.scrollY;
    document.body.style.position = "fixed";
    document.body.style.width = "100%";
    document.body.style.top = `-${currentScrollY}px`; 
    return currentScrollY;
};

const allowScroll = (prevScrollY) => {
    document.body.style.position = "";
    document.body.style.width = "";
    document.body.style.top = "";
    window.scrollTo(0, prevScrollY);
};

useEffect(() => {
    if (isOpen) {
      const prevScrollY = preventScroll();
      return () => {
        allowScroll(prevScrollY);
      };
    }
}, [isOpen]);

스크롤바가 사라지지 않으면서 스크롤이 안되는 상태로 적용 완!