CSS로 모달 Modal 스크롤 방지 ("overflow: hidden" 아님)

시작하며...

모달창이 열렸을 때 아래 방식으로 스크롤을 없앨 수 있다.

document.body.style.overflow = 'hidden';

 

 

그런데 나는 원래 스크롤이 있던 화면에 모달이 열렸다고 스크롤이 사라지고 모달이 닫히면 다시 생기는 게 먼가 살짝 불편했다. 😅

그래서 다른 방법으로 해결해 보았다!

 

기존 모달과 스크롤

기존에는 모달창이 열려있으면 스크롤을 마음대로 움직일 수 있는 상황이었다. 

스크롤이 움직임

 

스크롤 방지

위에 말했다시피 useEffect 를 사용하여 열렸을 때 아래 코드를 적용해서 해결할 수 있다.

document.body.style.overflow = 'hidden';

 

전역 스타일 수정

그런데 다른 방법 찾아보았다!

바로 전역 스타일에서 아래 코드를 추가하면 된다. 그러면 페이지 높이가 고정되어 스크롤이 작동되지 않는다. 

html,
body {
  height: 100%;
}

 

근데 이를 적용하면서 fixed 로 만들었던 헤더가 스크롤 뒤로 가게 되어서 헤더를 sticky 로 수정하였다.

 

결과

그러면 스크롤을 내려도 뒤에 있는 스크롤이 내려가지 않고 고정이 되는 것을 확인할 수 있다.

결과

 

모달 코드

참고로 모달 코드는 아래와 같다. (tailwind css + typescript)

const Modal = ({ children, isOpen, onClose }: ModalProps) => {
  const modalRef = useRef(null);

  const handleClickOutside = (e: MouseEvent<HTMLElement>) => {
    e.target === modalRef.current && onClose();
  };

  if (typeof window === 'undefined') {
    return <></>;
  }

  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <motion.aside
          className="fixed inset-0 z-20 flex items-center justify-center bg-grayscale-500/30"
          ref={modalRef}
          onClick={handleClickOutside}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          <div className="mx-2 flex h-auto w-[335px] flex-col rounded-10 bg-white p-[20px] shadow-lg md:w-[395px]">
            <div className="flex justify-end">
              <CloseIcon className="cursor-pointer" onClick={onClose} />
            </div>
            {children}
          </div>
        </motion.aside>
      )}
    </AnimatePresence>,
    document.body,
  );
};

 

마치며...

위에 같은 방식으로 페이지의 높이를 고정시켜 스크롤이 발생하지 않도록 하였다. hidden 으로 스크롤바를 숨길수는 있지만 다른 방식을 발견?하여 작성해 보았다! 물론 이게 좋은 방법인지는 모르겠지만 잘 동작하는 거 같다.