사이드 메뉴를 열면 배경이 스크롤이 되지 않도록 하고 싶을 때

const NavBar = () => {

useEffect(() => {

const scrollY = window.scrollY;

const bodyStyle = document.body.style;

bodyStyle.position = "fixed";

bodyStyle.top = `-${scrollY}px`;

bodyStyle.overflowY = "scroll";

bodyStyle.width = "100%";

return () => {

bodyStyle.cssText = "";

window.scrollTo(0, scrollY);

};

}, []);

return ( ...<컴포넌트/> );
};

사이드 메뉴 컴포넌트가 나타날 때 body에 css style을 몇 가지 적용하여 스크롤이 되지 않도록 할 수 있다.

const scrollY = window.scrollY;

0. 현재 스크롤 위치를 저장한다.

bodyStyle.position = "fixed";

1. body에 position을 fixed로 바꾸게 되면 스크롤 바가 사라지게 된다.

bodyStyle.top = `-${scrollY}px`;

2. 현재 스크롤 위치로 top을 이동한다.

bodyStyle.overflowY = "scroll";

3. 스크롤 바가 나타나도록 한다.

bodyStyle.width = "100%";

4. 내용물의 css가 display: flex로 인해 수축하는 것을 막기 위해서 width를 100%로 설정한다.

return () => { ... } ***컴포넌트가 제거될 때***

bodyStyle.cssText = "";

5. body에 적용 된 인라인 스타일을 모두 제거한다.

window.scrollTo(0, scrollY);

6. 현재 스크롤 위치로 이동시킨다.

width 설정 안했을 때 축소된 컨테이너 모습

참고글

React에서 Modal 구현하기(feat. createPortal, 스크롤 막기)