body 태그의 css를 변경합니다. positionfixed로 하고, top의 위치를 현재 스크롤 위치로 설정한 뒤 overflow-y: scroll; width: 100%; 을 추가 지정하면 스크롤바로 인해 배경의 위치가 움직이지 않고도 스크롤 방지를 할 수 있습니다.

useEffect를 사용해 css를 변경하며, 모달이 사라질 때에는 useEffectreturn을 사용해 bodycssText를 리셋시킨 다음 window,scroll을 이용해 현재 스크롤 위치로 강제 이동시킵니다. 참고로 useEffectreturn 절은 컴포넌트가 unmount 될 때 호출됩니다.

스크롤 방지 모달 스크롤 방지 스크롤 안되게 리액트 모달 스크롤 안되게

import React, { useEffect } from 'react';

export const Modal = (props) => {

  // 모달 오버레이에서 스크롤 방지
  useEffect(() => {
    document.body.style.cssText = `
      position: fixed; 
      top: -${window.scrollY}px;
      overflow-y: scroll;
      width: 100%;`;
    return () => {
      const scrollY = document.body.style.top;
      document.body.style.cssText = '';
      window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
    };
  }, []);

  return (
    <>
      {isDisplay && (
        `<Container>
          <ModalOverlay />
          <ModalWindow />
        </Container>`
      )}
    </>
  );
};

 

 

참고

문의 | 코멘트 또는 yoonbumtae@gmail.com


카테고리: React


1개의 댓글

이름 · 2021년 10월 9일 10:36 오후

좋은 정보 감사합니다!

답글 남기기

Avatar placeholder

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다