[TIL] 모달창 외부 화면 스크롤 방지

모달창 외부 화면 스크롤

더보기 버튼을 클릭할때 모달창 외부의 화면이 스크롤이 되는 현상을 확인했다.
이부분의 경우 생각을 안하고 있었는데 예상외로 부분의 피드백이 들어와서 수정을 하게되었다.

참고

overflow

overflow의 값에 따라 body 요소의 overflow 속성을 변경

 const toggleBodyOverflow = (overflow: 'hidden' | 'auto') => {
    document.body.style.overflow = overflow;
  };

overflow 매개변수는 두 가지 값만 받을 수 있습니다: 'hidden' 또는 'auto'.
'hidden'을 전달하면 body의 스크롤이 숨겨지고, 'auto'를 전달하면 body의 스크롤이 다시 나타납니다.

useEffect

useEffect를 사용하여 모달이나 더보기 버튼이 활성화될 때 body의 스크롤을 막고, 닫힐 때 다시 활성화시킨다.

  useEffect(() => {
    if (isCommuEditModal || isMoreBtn) {
      toggleBodyOverflow('hidden');
    } else {
      toggleBodyOverflow('auto');
    }
  }, [isCommuEditModal, isMoreBtn]);

useEffect 함수는 두 번째 매개변수로 전달된 배열에 있는 값들이 변경될 때마다 실행됩니다. 여기서는 isCommuEditModal과 isMoreBtn이 변경될 때마다 실행됩니다.

if (isCommuEditModal || isMoreBtn)은 모달이나 더보기 버튼 중 하나라도 활성화될 때를 검사합니다.

만약 위 조건이 참이면 toggleBodyOverflow('hidden')을 호출하여 body의 스크롤을 막습니다. (overflow를 'hidden'으로 설정)

그렇지 않으면 (else 부분), toggleBodyOverflow('auto')를 호출하여 body의 스크롤을 다시 활성화시킵니다. (overflow를 'auto'로 설정)
return () => { toggleBodyOverflow('auto'); };는 useEffect의 clean-up 함수로, 해당 컴포넌트가 소멸될 때 실행되어 overflow를 'auto'로 되돌립니다. 이는 모달이 닫힐 때 호출됩니다.

이러한 방식으로 모달이나 더보기 버튼이 열리거나 닫힐 때마다 body의 스크롤을 조절하게 됩니다.

결과