모달창 밖에 스크롤 이벤트는 어떻게 끌 수 있을까요?

Question

안녕하세요.모달창 을 띄우고 스크롤을 하면 모달창밖에 화면이 스크롤이 되는데 이부분도useRef를 이용해서 막을 수 있을까요??

Answer

안녕하세요

가장 간단한 방법은

body에 overflowY를 hidden으로 해서 CSS로 처리할 수 있습니다.

코드로 예를 들면

  const handleClick = (movie) => {
    document.body.style.overflowY = "hidden";
    setModalOpen(true);
    setMovieSelected(movie);
  };

이렇게 해주면 되겠죠!

그 대신

  useOnClickOutside(ref, () => {
    document.body.style.overflowY = "auto";
    setModalOpen(false);
  });

닫을 때는 이렇게 다시 원래대로 돌려주셔야 합니다.

감사합니다.