모달 외부 스크롤 막기!

시작하며

모달을 구현했는데 모달 외부 스크롤이 되어 불편했다!
그래서 모달이 띄워져있으면 외부스크롤을 막아보려고 작성했다!
(참고로 모달창 외부 클릭시 닫기 코드도 포함되어있다. )
(이해하기 힘들다면 여기를 확인해 주시면 감사하겠습니다 😄)

구현된 모달

문제점

modal이 떠 있을 땐 화면 스크롤이 금지되어 있다.
스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다.

해결책 1 - CSS로 설정하기

overflow: hidden 설정으로 스크롤을 막을 수 있다.

 const lockScroll = useCallback(() => {
    document.body.style.cssText = `
    overflow-y: hidden;
    `;
  }, []);

하지만 이 방법의 경우, 스크롤은 막았지만 스크롤바가 사라졌다가 다시 나타나서 화면의 폭이 바뀐다.
그에 따라 내부 화면도 바뀔 수 있다.
스크롤바가 없는 모바일 화면의 경우는 사용 가능하지만, 스크롤바가 나타나는 데스크탑 페이지의 경우 적합하지 않은 것 같다.

해결책 2 - body의 position을 고정

import { useCallback } from 'react';

export default function useBodyScrollLock() {
  //모달이 열렸을 때 스크롤을 막는다
  const lockScroll = useCallback(() => {
    document.body.style.cssText = `
    position:fixed;
    top: -${window.scrollY}px;
    overflow-y: scroll;
    width: 100%;
    `;
  }, []);

  // 모달이 닫혔을 때 스크롤을 활성화 한다.
  const openScroll = useCallback(() => {
    const scrollY = document.body.style.top;
    document.body.style.cssText = '';
    window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
  }, []);

  return { lockScroll, openScroll };
}

난 위와 같이 따로 hook을 만들어서 사용했다.
position: fixed; 설정과 함께 top: -${window.scrollY}px; 로 현재 위치로 스크롤을 이동시키고,
모달이 사라질 때 window.scrollTo(0, parseInt(scrollY || '0', 10) * -1); 로 원래 위치로 이동시켜준다.

이렇게 하면 현재 위치에서 모달을 열고 닫을 수 있다!