인프런 커뮤니티 질문&답변

조찬호님의 프로필 이미지
조찬호

작성한 질문수

따라하며 배우는 리액트 A-Z[19버전 반영]

모달 창 외부 클릭 시 모달 닫게 만드는 Custom Hooks 생성

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

작성

·

2.9K

1

안녕하세요.

모달창 을 띄우고 스크롤을 하면 모달창

밖에 화면이 스크롤이 되는데 이부분도

useRef를 이용해서 막을 수 있을까요??

답변 1

2

John Ahn님의 프로필 이미지
John Ahn
지식공유자

안녕하세요

가장 간단한 방법은

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);
  });

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

감사합니다.

조찬호님의 프로필 이미지
조찬호

작성한 질문수

질문하기