[react/mui] 모달(modal) 호출시 스크롤바가 사라졌다가, 모달을 닫으면 다시 생기는 문제로 인해(jumping scrollbar) 화면이 흔들리는 이슈

환경

• react 18
• @mui/material: 5.11.2
  • @mui/base의 Modal 컴포넌트를 사용하여 모달 구현

개요

• mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다.
• 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다.
  • 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림

해결

  /**
   * jumping scrollbar issue 해결방안
   *
   *  1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고, 다시 모달이 닫히면 header부가 원복되는 것 때문에
   *    모달이 열리고 닫힐 때 헤더가 좌우로 흔들리는 것 같은 현상이 있다.
   *
   *  2) disableScrollLock 옵션을 사용하면, 이 문제를 해결할 수 있으나, 마우스 스크롤시 백그라운드가 스크롤이 된다는 단점이 있다.
   *
   *  이 부분은 1)의 밀리는 현상을 동적 padding으로 커버하여 header부가 고정된 것처럼 보이게 처리한 것임.
   */
  useEffect(() => {
    // 우리 사이트는 <header /> 엘리먼트가 특히 문제였음.
    const header = document.querySelector('header'); 
    if (header) {
      if (open) { // 모달노출상태
        header.style.paddingRight = '17px';
      } else {
        header.style.paddingRight = '0px';
      }
    }
  }, [open]);